/* KechElec — Public Foundation Consolidated Authority. Generated from reviewed sources in cascade order. */ /* ===== legacy foundation absorbed ===== */ /* Embedded brand palette authority — r1 */ /** * KechElec v1.4.1 — Electric Pantone digital palette * Browser source of truth for the four application surfaces. * Pantone references are the brand anchors; UI derivatives are digital accessibility adaptations. */ :root { --kech-1505: #FF6B00; --kech-4132: #3B3B4B; --kech-4001: #EADB9C; --kech-2204: #AECCD8; --kech-dark-bg: #1C1D26; --kech-dark-panel: #2B2C38; --kech-dark-card: var(--kech-4132); --kech-dark-text: #FAF7E8; --kech-dark-muted: var(--kech-2204); --kech-light-bg: #F8F5E7; --kech-light-panel: #EEF4F6; --kech-light-text: #292A34; --kech-light-muted: #59636B; --kech-accent: var(--kech-1505); --kech-accent-strong: #B84400; --kech-secondary: var(--kech-2204); --kech-warm: var(--kech-4001); --kech-focus: var(--kech-1505); --kech-success: #17865B; --kech-warning: #A65E00; --kech-danger: #B73549; } /* KechElec V2.0 — Socle commun multisupport Aucun breakpoint de mise en page dans ce fichier. */ :root{ --white:#fff; --max:1280px;--radius:10px;--header:76px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;font-family:Inter,Arial,sans-serif;line-height:1.55;} html,body{max-width:100%;overflow-x:clip;} body>*{max-width:100%;} img{display:block;width:100%;height:auto;} a{color:inherit;} button,input,select,textarea{font:inherit;} h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.03;margin:0;} h1{font-size:clamp(3rem,7.4vw,7.8rem);max-width:11ch;letter-spacing:-.045em;} h2{font-size:clamp(2.25rem,5vw,5rem);max-width:13ch;letter-spacing:-.035em;} h3{font-size:clamp(1.35rem,2vw,2rem);} p{margin:0;} .eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.19em;font-weight:900;} .skip{position:fixed;top:0;inset-inline-start:0;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;z-index:9999;}.skip:focus{width:auto;height:auto;clip-path:none;overflow:visible;inset-inline-start:1rem;top:1rem;background:#fff;color:#111;padding:1rem;border-radius:.5rem;} .header{height:var(--header);color:#fff;background:linear-gradient(rgba(10,10,10,.76),rgba(10,10,10,.15));transition:.35s;} .header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;} .brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;font-weight:900;letter-spacing:.04em;} .brand-mark{width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;} .nav{display:flex;align-items:center;gap:1.2rem;font-size:.9rem;}.nav a{text-decoration:none;opacity:.9;}.nav a:hover{opacity:1;} .langs{gap:.35rem;}.langs a{border:1px solid rgba(255,255,255,.28);padding:.32rem .48rem;border-radius:.5rem;} .menu{display:none;border:0;background:none;color:#fff;font-size:1.5rem;} .hero{position:relative;min-height:100svh;overflow:hidden;background:#111;color:#fff;display:grid;align-items:end;} .hero-media,.hero-slide{position:absolute;inset:0;} .hero-slide{opacity:0;transition:opacity 1.5s ease;transform:scale(1.02);} .hero-slide.active{opacity:1;animation:zoom 9s linear forwards;} .hero-slide img{height:100%;object-fit:cover;} @keyframes zoom{to{transform:scale(1.075)}} .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,9,.86),rgba(9,9,9,.35) 55%,rgba(9,9,9,.06)),linear-gradient(0deg,rgba(9,9,9,.68),transparent 45%);} .hero-content{position:relative;z-index:2;padding:calc(var(--header) + 5rem) 0 4.5rem;} .hero-copy{max-width:55ch;margin-top:1.35rem;color:rgba(255,255,255,.85);} .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;} .btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border-radius:999px;padding:.9rem 1.2rem;font-weight:900;border:1px solid transparent;} .btn-ghost{border-color:rgba(255,255,255,.58);color:#fff;background:rgba(255,255,255,.06);} .hero-proof{display:flex;gap:2rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.24);max-width:750px;} .hero-proof strong{display:block;font-family:Georgia,serif;font-size:1.6rem;}.hero-proof span{font-size:.8rem;color:rgba(255,255,255,.7);} section{padding:clamp(5rem,10vw,9rem) 0;} .intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,8rem);align-items:end;} .intro p:last-child{font-size:clamp(1.08rem,2vw,1.4rem);color:var(--muted);} .story{background:#171513;color:#fff;} .story h2,.story h3{color:#fff;} .story-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,6vw,6rem);align-items:center;} .story-step:nth-child(even) .story-image{order:2;} .story-image{border-radius:var(--radius);overflow:hidden;position:relative;} .step-no{font-family:Georgia,serif;font-size:4rem;color:rgba(255,255,255,.18);} .story-text p{max-width:50ch;} .services-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;} .services-head p{max-width:48ch;color:var(--muted);} .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;} .service{min-height:420px;border-radius:var(--radius);overflow:hidden;position:relative;background:#222;color:#fff;} .service img{height:100%;object-fit:cover;transition:.7s;} .service:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 62%);} .service-content{position:absolute;z-index:2;inset:auto 1.4rem 1.4rem;} .service p{font-size:.9rem;color:rgba(255,255,255,.75);margin-top:.5rem;} .service:hover img{transform:scale(1.045);} .precision{color:#fff;} .precision-wrap{grid-template-columns:1.2fr .8fr;} .precision-copy{display:flex;flex-direction:column;} .precision-copy p{max-width:45ch;} .ba-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;align-items:center;} .compare{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;box-shadow:0 25px 70px rgba(0,0,0,.18);} .compare img{position:absolute;inset:0;height:100%;object-fit:cover;} .compare .after{clip-path:inset(0 50% 0 0);} .compare-line{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2);} .compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;} .compare-label{position:absolute;top:1rem;padding:.45rem .65rem;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;font-weight:900;} .label-before{left:1rem;}.label-after{right:1rem;} .testimonial{color:#fff;text-align:center;} .testimonial blockquote{font-family:Georgia,serif;font-size:clamp(2rem,5vw,5rem);line-height:1.06;max-width:21ch;margin:0 auto;} .testimonial p{margin-top:1.5rem;color:rgba(255,255,255,.8);} .delivery{position:relative;display:grid;align-items:end;color:#fff;overflow:hidden;background:#111;} .delivery img{position:absolute;inset:0;height:100%;object-fit:cover;} .delivery:after{content:"";position:absolute;inset:0;} .delivery-content{position:relative;z-index:2;padding:4rem 0;}.delivery h2{color:#fff;}.delivery p{max-width:50ch;color:rgba(255,255,255,.8);margin-top:1rem;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .field{display:grid;gap:.4rem;}.full{grid-column:1/-1;} label{font-weight:800;font-size:.88rem;} input,select,textarea{width:100%;border:1px solid #cfc5b9;border-radius:.75rem;padding:.85rem;background:#fff;} textarea{min-height:130px;resize:vertical;} .footer{background:#151412;color:#fff;}.footer a{text-decoration:none;color:rgba(255,255,255,.72);display:block;margin:.35rem 0;} .fab{position:fixed;right:1rem;bottom:1rem;z-index:40;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#1d6f48;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 14px 35px rgba(0,0,0,.25);} .reveal{transition:.8s;}.reveal.visible{opacity:1;transform:none;} /* V1.4 — Hero plein écran responsive + méthode compacte */ .hero-v14{padding:0;align-items:center;} .hero-v14 .hero-slide{animation:none;} .hero-v14 .hero-slide img{object-fit:cover;object-position:center 44%;} .hero-v14 .hero-slide:nth-child(1) img{object-position:center 48%;} .hero-v14 .hero-slide:nth-child(2) img{object-position:center 48%;} .hero-v14 .hero-slide:nth-child(3) img{object-position:center 46%;} .hero-v14 .hero-slide:nth-child(4) img{object-position:center 42%;} .hero-v14 .hero-slide:nth-child(5) img{object-position:center 46%;} @keyframes heroZoom{from{transform:scale(1.01)}to{transform:scale(1.055)}} .hero-v14:after{display:none;}.hero-overlay{position:absolute;inset:0;z-index:1;} .hero-v14 .hero-content{align-self:center;} .hero-v14 h1{text-wrap:balance;} .hero-controls{position:absolute;z-index:4;right:clamp(1rem,4vw,4rem);bottom:2.2rem;display:flex;align-items:center;gap:.7rem;} .hero-dots{display:flex;gap:.55rem;}.hero-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.3);padding:0;cursor:pointer;}.hero-dot.active{background:#fff;transform:scale(1.15);} .hero-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.3);color:#fff;font-size:1.7rem;cursor:pointer;} .method-strip{background:#f5efe7;} .method-heading{text-align:center;} .method-cards{display:grid;grid-template-columns:repeat(5,1fr);} .method-card{position:relative;min-height:175px;background:#171513;color:#fff;cursor:pointer;isolation:isolate;outline-offset:3px;} .method-card img{position:absolute;inset:0;height:100%;object-fit:cover;z-index:-2;}.method-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.12));z-index:-1;} .method-card>div{position:absolute;left:1rem;right:1rem;bottom:.9rem;}.method-card h3{font-size:1.08rem;}.method-card p{font-size:.78rem;color:rgba(255,255,255,.76);margin-top:.25rem;} .method-no{position:absolute;font-family:Georgia,serif;font-weight:700;} .method-card:hover img,.method-card:focus img{transform:scale(1.045);transition:transform .55s ease;} /* ========================================================= V1.5 — HERO ÉQUILIBRÉ, PLUS LISIBLE ET PLUS PHOTOGRAPHIQUE ========================================================= */ .hero-v14{min-height:clamp(650px,82svh,860px);} .hero-v14 .hero-content{padding:calc(var(--header) + 3.25rem) 0 3.8rem;} .hero-v14 h1{font-size:clamp(2.8rem,5.2vw,5.7rem);max-width:10.7ch;line-height:.98;} .hero-v14 .hero-copy{margin-top:1rem;max-width:56ch;font-size:clamp(1rem,1.5vw,1.2rem);} .hero-v14 .actions{margin-top:1.55rem;} .hero-overlay{ background: linear-gradient(90deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.58) 36%,rgba(5,5,5,.18) 68%,rgba(5,5,5,.05) 100%), linear-gradient(0deg,rgba(5,5,5,.34),transparent 48%); } /* V1.6 — Frise interactive avec photo et texte */ .method-card{ padding:0;text-align:left;font:inherit; } .method-card-copy{ position:absolute;left:1rem;right:1rem;bottom:.9rem;display:grid;gap:.18rem; } .method-card-copy strong{ font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.08; } .method-card-copy small{ font-size:.78rem;color:rgba(255,255,255,.76);line-height:1.3; } .method-card.active{ outline:3px solid var(--clay);outline-offset:3px; } .method-card.active:before{ content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.72); border-radius:inherit;z-index:2;pointer-events:none; } .method-details{margin-top:1.35rem;} .method-detail{ grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); color:#fff; } .method-detail[hidden]{display:none;} .method-detail-media{overflow:hidden;background:#282522;} .method-detail-media img{object-position:center;} .method-detail-no{ font-family:Georgia,"Times New Roman",serif; opacity:.82; } .method-detail-copy h3{ margin-top:.6rem;color:#fff; } .method-detail-copy p{ max-width:48ch; } .method-detail.active{animation:methodFade .45s ease both;} @keyframes methodFade{ from{opacity:.25;transform:translateY(10px)} to{opacity:1;transform:none} } /* V1.7 Consolidate — multilingual parity and RTL */ body.rtl-page{font-family:Arial,"Noto Sans Arabic",sans-serif;} body.rtl-page .header-inner, body.rtl-page .nav, body.rtl-page .actions, body.rtl-page .method-card-copy, body.rtl-page .story-text, body.rtl-page .service-content, body.rtl-page .precision-copy, body.rtl-page .delivery-content, body.rtl-page .contact-grid, body.rtl-page .footer-grid{text-align:right;} body.rtl-page .method-card{text-align:right;} body.rtl-page .compare .after{clip-path:inset(0 0 0 50%);} body.rtl-page .compare-line{left:auto;right:50%;} body.rtl-page input, body.rtl-page textarea, body.rtl-page select{text-align:right;} .langs a[aria-current="page"]{text-decoration:underline;text-underline-offset:.28em;font-weight:800;} /* ========================================================= V1.9 — RESPONSIVE METHOD STORY Desktop : panneau texte + image. Mobile : accordéon narratif local, sans étiquettes distantes. ========================================================= */ /* Le texte devient prioritaire dans le panneau desktop. */ /* Tablette : toujours deux zones, mais plus équilibrées. */ /* Mobile : transformation complète en accordéon narratif. */ @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important;}} @media(prefers-reduced-motion:reduce){.hero-v14 .hero-slide.active{animation:none;}} @media(prefers-reduced-motion:reduce){ .method-detail.active{animation:none;} } @media (prefers-reduced-motion:reduce){ .method-card, .method-detail{scroll-behavior:auto;} } /* ========================================================= V5.0 — CINEMATIC FLOW Crossfade continu, Ken Burns sans snap-back et rythme resserré. ========================================================= */ .hero-v14 .hero-slide{ opacity:0; transform:scale(1.012); will-change:opacity,transform; backface-visibility:hidden; transition:opacity 1.5s cubic-bezier(.22,.61,.36,1); } .hero-v14 .hero-slide.active{ opacity:1; z-index:2; animation:heroKenBurnsV5 9.2s cubic-bezier(.16,.84,.34,1) both; } .hero-v14 .hero-slide.leaving{ opacity:0; z-index:1; /* Le JS conserve ici la matrice de zoom réellement atteinte. */ } @keyframes heroKenBurnsV5{ from{transform:scale(1.012)} to{transform:scale(1.064)} } /* La narration conserve ses respirations, sans produire de tunnels vides. */ .story-step{margin-top:clamp(3.25rem,6vw,5.5rem);} .story-step:first-of-type{margin-top:clamp(2.5rem,4vw,4rem);} .story-image{min-height:clamp(360px,48vw,560px);} .story-step:nth-of-type(2) .story-image, .story-step:nth-of-type(5) .story-image{min-height:clamp(320px,40vw,480px);} .story-step:nth-of-type(4) .story-image{min-height:clamp(300px,36vw,440px);} .story-step:nth-of-type(6) .story-image{min-height:clamp(400px,52vw,620px);} .story-step:nth-of-type(6){margin-bottom:clamp(1rem,3vw,3rem);} .story-image img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);} .story-step.visible .story-image img{transform:scale(1.012);} @media(prefers-reduced-motion:reduce){ .hero-v14 .hero-slide,.hero-v14 .hero-slide.active,.hero-v14 .hero-slide.leaving{ animation:none!important;transform:none!important; } } /* V5.1 — interaction, accessibilité et conversion */ .hero-progress{position:absolute;left:50%;bottom:1.15rem;width:min(18rem,42vw);height:2px;transform:translateX(-50%);overflow:hidden;background:rgba(255,255,255,.22);z-index:6;border-radius:999px;} .hero-progress-bar{display:block;width:100%;height:100%;transform-origin:left center;background:rgba(255,255,255,.92);} @keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}} .contact-direct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.5rem;max-width:34rem;} .contact-direct-link{display:flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1rem;border:1px solid rgba(20,18,16,.16);border-radius:999px;font-weight:700;text-align:center;transition:transform .2s ease,background .2s ease,border-color .2s ease;} .contact-direct-link:hover,.contact-direct-link:focus-visible{transform:translateY(-2px);} .contact-direct-call{background:var(--ink);color:#fff;} .contact-direct-wa{background:#078a58;color:#fff;border-color:#078a58;} .contact-direct small{grid-column:1/-1;color:var(--muted);font-size:.78rem;} @media (prefers-reduced-motion:reduce){.hero-progress{display:none;}.contact-direct-link{transition:none;}} /* V5.2 — sécurité d'affichage et diaporama mobile */ .reveal{opacity:1;transform:none;} .reveal-ready .reveal{opacity:0;transform:translateY(28px);} .reveal-ready .reveal.visible{opacity:1;transform:none;} .hero-slide.no-ken-burns.active{animation:none!important;transform:scale(1.02)!important;} /* ========================================================= V5.3 — RTL mobile hero hardening (Samsung / Chromium) Le moteur visuel du hero reste en LTR pour éviter les erreurs de composition GPU observées avec dir="rtl" sur certains Samsung. Le contenu éditorial conserve naturellement la direction RTL. ========================================================= */ body.rtl-page .hero-v14{ min-height:clamp(680px,88svh,940px)!important; padding:0!important; background-color:#111!important; background-image:url("/assets/images/kechelec-diagnostic-installation-electrique-marrakech-desktop.webp"); background-size:cover; background-position:center center; } body.rtl-page .hero-v14 .hero-media, body.rtl-page .hero-v14 .hero-slide, body.rtl-page .hero-v14 .hero-controls, body.rtl-page .hero-v14 .hero-progress{ direction:ltr; } body.rtl-page .hero-v14 .hero-media{ } body.rtl-page .hero-v14 .hero-slide{ } body.rtl-page .hero-v14 .hero-slide.active{ opacity:1!important; visibility:visible!important; } body.rtl-page .hero-v14 .hero-content{ } body.rtl-page .hero-v14 .hero-overlay{ } /* ========================================================= V5.6 — TRANSFORMATION GALLERY Galerie avant/après multi-projets, tactile, clavier et RTL-safe. ========================================================= */ .transformations{background:#ded4c6;} .transformations-heading{display:grid;grid-template-columns:minmax(0,.85fr) minmax(300px,1.15fr);gap:clamp(1.5rem,6vw,6rem);align-items:end;} .transformations-heading h2{max-width:14ch;} .transformations-heading>p:last-child{max-width:58ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);} .transformation-tabs{display:flex;justify-content:center;align-items:center;gap:.65rem;flex-wrap:wrap;margin:2.2rem auto 1.2rem;background:transparent;border:0;box-shadow:none;} .transformation-tab{border:1px solid rgba(22,20,18,.18);background:transparent;color:var(--ink);border-radius:10px;padding:.72rem 1rem;font-weight:850;cursor:pointer;transition:.2s ease;} .transformation-tab:hover,.transformation-tab:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(240,90,36,.58);} .transformation-tab.active{background:transparent;color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(240,90,36,.22);} .transformation-stage{position:relative;} .transformation-panel[hidden]{display:none;} .transformation-panel.active{animation:transformPanelIn .35s ease both;} .transformation-compare{aspect-ratio:16/8.7;max-height:760px;border-radius:clamp(1rem,2vw,1.5rem);background:#1b1917;} .transformation-compare .compare-line:after{content:"↔";position:absolute;top:50%;left:50%;width:48px;height:48px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#171513;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.22);} body.rtl-page .transformation-compare .compare-line:after{content:"↔";} @keyframes transformPanelIn{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}} @media(max-width:700px){ .transformations-heading{grid-template-columns:1fr;gap:1rem;} .transformation-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:1.5rem auto 1.2rem;justify-content:center;background:transparent;} .transformation-tab{width:100%;padding:.75rem .55rem;} .transformation-compare{aspect-ratio:4/5;max-height:none;} .transformation-compare img{object-position:center;} .transformation-compare .compare-line:after{width:42px;height:42px;} } @media(min-width:1600px){ .transformation-compare{max-height:820px;} .transformation-tabs{margin-top:2.8rem;} } @media(prefers-reduced-motion:reduce){.transformation-tab,.transformation-panel.active{transition:none;animation:none;}} /* ========================================================= V5.8.0 — PWA POWER BRIDGE Pont conversationnel vocal, formulaire conservé en fallback. ========================================================= */ .power-bridge-copy{margin-top:1rem;color:var(--muted);max-width:58ch;font-size:1.05rem;}.power-bridge-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 1rem;}.power-bridge-start{border:0;cursor:pointer;}.power-bridge-fallback{font-weight:800;text-decoration:underline;text-underline-offset:4px;}.pwa-install{border:1px solid rgba(22,20,18,.2);background:transparent;border-radius:999px;padding:.65rem 1rem;font-weight:800;cursor:pointer;margin-bottom:1rem;}.conversation-dialog{border-radius:12px;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.42);}.conversation-shell{flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}.conversation-header{justify-content:space-between;gap:1rem;flex:0 0 auto;}.conversation-kicker{font-size:.72rem;font-weight:950;letter-spacing:.17em;color:var(--accent);}.conversation-header h2{font-size:clamp(1.55rem,4vw,2.35rem);margin-top:.2rem;line-height:1.02;}.conversation-close{flex:0 0 42px;font-size:1.5rem;cursor:pointer;}.conversation-progress{grid-template-columns:repeat(3,1fr);gap:.45rem;flex:0 0 auto;}.conversation-progress span{height:5px;border-radius:12px;background:rgba(22,20,18,.14);}.conversation-progress span.active{background:var(--accent);}.conversation-avatar{display:flex;align-items:center;justify-content:center;gap:.8rem;flex:0 0 auto;}.avatar-disc{position:relative;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;color:#fff;border:4px solid #fff;box-shadow:0 0 0 2px rgba(197,94,43,.35),0 8px 26px rgba(0,0,0,.15);}.avatar-disc span{font-weight:950;letter-spacing:.08em;}.avatar-disc i{position:absolute;bottom:14px;width:5px;height:5px;border-radius:50%;background:#fff;}.avatar-disc i:first-of-type{left:24px;}.avatar-disc i:last-of-type{right:24px;}.avatar-copy{flex-direction:column;}.conversation-avatar.speaking .avatar-disc{animation:avatarTalk 1s ease-in-out infinite;}.conversation-avatar.speaking .avatar-disc::after{content:"";position:absolute;inset:-9px;border:2px solid rgba(197,94,43,.45);border-radius:50%;animation:avatarWave 1s ease-out infinite;}.conversation-log{display:flex;flex-direction:column;flex:1 1 auto;}.conversation-message.assistant{align-self:flex-start;border-bottom-left-radius:5px;}.conversation-message.user{align-self:flex-end;border-bottom-right-radius:5px;}.conversation-state{flex:0 0 auto;}.conversation-shell[data-voice-state="error"] .conversation-state{color:#9f2e20;}.conversation-shell[data-voice-state="hearing"] .conversation-state{color:#2f6a43;}.voice-orb{display:flex;align-items:center;justify-content:center;}.voice-orb span{background:#fff;}.conversation-compose{flex:0 0 auto;}.conversation-compose textarea{width:100%;font:inherit;background:#fff;}.conversation-controls{display:flex;flex-direction:column;gap:.55rem;}.voice-button{width:52px;height:52px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:1.25rem;cursor:pointer;}.voice-button.active{background:#171513;}.conversation-controls .btn{height:52px;padding-inline:1rem;border:0;}.conversation-privacy{line-height:1.4;flex:0 0 auto;}.conversation-final-actions{flex:0 0 auto;}.conversation-final-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;}.conversation-modify{background:#ece4d9;color:var(--ink);border:0;}.conversation-whatsapp{text-align:center;text-decoration:none;}.conversation-shell[dir=rtl] .conversation-message.assistant{align-self:flex-end;border-bottom-left-radius:18px;border-bottom-right-radius:5px;}.conversation-shell[dir=rtl] .conversation-message.user{align-self:flex-start;border-bottom-right-radius:18px;border-bottom-left-radius:5px;}@keyframes avatarTalk{50%{transform:scale(1.045)}}@keyframes avatarWave{from{opacity:.8;transform:scale(.92)}to{opacity:0;transform:scale(1.16)}}@media(max-width:600px){.conversation-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;}.conversation-shell{height:100dvh;max-height:100dvh;padding:1rem;}.conversation-header h2{font-size:1.8rem;}.conversation-log{min-height:90px;max-height:none;}.conversation-compose{grid-template-columns:1fr;}.conversation-controls{flex-direction:row;}.conversation-controls .btn{flex:1;}.voice-button{flex:0 0 52px;}.conversation-final-buttons{grid-template-columns:1fr;}}@media(max-height:760px) and (min-width:601px){.conversation-shell{gap:.6rem;}.conversation-log{min-height:80px;max-height:150px;}.avatar-disc{width:62px;height:62px;}.voice-orb{width:66px;height:66px;flex-basis:66px;}.conversation-compose textarea{min-height:68px;}}@media(prefers-reduced-motion:reduce){.conversation-avatar.speaking .avatar-disc,.conversation-avatar.speaking .avatar-disc::after{animation:none;}} /* V6.2.1 — Audio Diagnostic Engine */ .conversation-diagnostic{border:1px solid rgba(183,101,62,.35);border-radius:12px;background:rgba(255,255,255,.86);overflow:hidden;font-size:.82rem;}.conversation-diagnostic summary{cursor:pointer;padding:10px 12px;font-weight:800;display:flex;justify-content:space-between;gap:12px;}.conversation-diagnostic summary span{font-weight:600;opacity:.7;}.diagnostic-grid{display:grid;gap:1px;background:rgba(0,0,0,.06);border-top:1px solid rgba(0,0,0,.07);}.diagnostic-row{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:#fff;}.diagnostic-row span{color:#4c403a;}.diagnostic-row strong{text-align:right;font-size:.78rem;}.diagnostic-row.ok strong{color:#26763b;}.diagnostic-row.error strong{color:#a32626;}.diagnostic-row.working strong{color:#8a6111;}.diagnostic-actions{display:flex;flex-wrap:wrap;gap:7px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.07);}.diagnostic-actions button{border:1px solid rgba(0,0,0,.18);border-radius:9px;background:#fff;padding:7px 9px;cursor:pointer;font:inherit;}.diagnostic-actions button:disabled{opacity:.45;cursor:not-allowed;}.conversation-diagnostic pre{max-height:180px;overflow:auto;margin:0;padding:10px 12px;background:#1d1d1d;color:#e8e8e8;font-size:.7rem;white-space:pre-wrap;word-break:break-word;}.conversation-diagnostic pre:empty{display:none;}@media(max-width:600px){.diagnostic-row{display:block;}.diagnostic-row strong{display:block;text-align:left;margin-top:3px;}} /* V6.2.5 — Cognitive Conversation Engine */ .conversation-review{font:inherit;line-height:1.5;color:var(--ink);} .conversation-review:focus{outline:3px solid rgba(197,94,43,.18);border-color:var(--accent);}.conversation-review-tools .btn{border:0;min-height:46px;}.conversation-final-actions>.conversation-whatsapp{display:block;text-align:center;text-decoration:none;width:100%;} .conversation-shell[data-voice-state="ready"] .conversation-state{color:#2f6a43;}.conversation-shell[data-voice-state="processing"] .conversation-state{color:var(--accent);} @media(max-width:600px){.conversation-review-tools{grid-template-columns:1fr;}.conversation-review{min-height:135px;}} /* ========================================================= V6.2.6 — Homepage Visual Stabilization ========================================================= */ .header.scrolled{ -webkit-backdrop-filter:blur(15px) saturate(115%); backdrop-filter:blur(15px) saturate(115%); border-bottom:1px solid rgba(255,255,255,.08); } /* legacy white method progress removed; KechElec gradient is the single progress cue. */ @media (min-width:701px){ /* Titres éditoriaux : moins de hauteur perdue, meilleure lecture horizontale */ .story>.container>h2{ max-width:24ch; font-size:clamp(2.4rem,4.2vw,4.7rem); line-height:1.02; } .services-head h2{ max-width:22ch; font-size:clamp(2.25rem,3.8vw,4.25rem); line-height:1.04; } .transformations-heading h2{ max-width:24ch; font-size:clamp(2.25rem,3.8vw,4.25rem); line-height:1.04; } /* Les blocs pairs restent visuellement collés à leur photo située à droite. */ .story-step:nth-of-type(even) .story-text{ justify-self:end; width:min(100%,34rem); } .story-step:nth-of-type(odd) .story-text{ justify-self:start; width:min(100%,34rem); } } /* ========================================================= V6.3.0 — FOUNDATION LOCK Identité conversationnelle, stabilité visuelle et Voice UX ========================================================= */ .conversation-identity{gap:.8rem;min-width:0;text-align:left;} .conversation-shell[dir=rtl] .conversation-identity{text-align:right;} .conversation-identity .avatar-disc{width:58px;height:58px;flex:0 0 58px;border-width:3px;box-shadow:0 0 0 2px rgba(197,94,43,.28),0 7px 20px rgba(0,0,0,.12);} .conversation-identity .avatar-disc span{font-size:.95rem;} .conversation-identity .avatar-disc i{bottom:11px;width:4px;height:4px;} .conversation-identity .avatar-disc i:first-of-type{left:18px;}.conversation-identity .avatar-disc i:last-of-type{right:18px;} .avatar-copy{line-height:1.1;}.avatar-copy strong{letter-spacing:.04em;}.avatar-copy span{font-size:.9rem;font-weight:850;color:var(--ink);}.avatar-copy small{font-size:.76rem;color:var(--muted);margin-top:.15rem;} .conversation-title-row{display:flex;align-items:center;min-height:2.7rem;} .conversation-progress{margin-top:.1rem;} .conversation-log{gap:.65rem;} .conversation-message.assistant{max-width:96%;}.conversation-message.user{max-width:90%;} .conversation-state{justify-content:flex-start;text-align:left;font-weight:850;line-height:1.25;contain:layout;} .conversation-shell[dir=rtl] .conversation-state{text-align:right;} .conversation-state-dot{border-radius:50%;transition:background .3s ease,box-shadow .3s ease;} .conversation-shell[data-voice-state="recording"] .conversation-state-dot,.conversation-shell[data-voice-state="hearing"] .conversation-state-dot{background:#2f6a43;box-shadow:0 0 0 6px rgba(47,106,67,.13);} .conversation-shell[data-voice-state="processing"] .conversation-state-dot,.conversation-shell[data-voice-state="uploading"] .conversation-state-dot{background:var(--accent);box-shadow:0 0 0 6px rgba(197,94,43,.13);} .conversation-shell[data-voice-state="error"] .conversation-state-dot{background:#9f2e20;box-shadow:0 0 0 6px rgba(159,46,32,.12);} .voice-orb{--voice-level:0;flex:0 0 76px;gap:4px;transform:scale(calc(1 + var(--voice-level)*.035));transition:transform .28s ease,box-shadow .35s ease;position:relative;} .voice-orb::before{content:"";position:absolute;inset:-8px;border:1px solid rgba(197,94,43,.34);border-radius:50%;opacity:.65;transform:scale(.96);} .voice-orb.listening::before{animation:azVoiceBreath 2.4s ease-in-out infinite;} .voice-orb span{width:4px;height:14px;transition:height .25s ease;border-radius:999px;opacity:.92;} .voice-orb.hearing span:nth-child(1){height:calc(13px + var(--voice-level)*15px);} .voice-orb.hearing span:nth-child(2){height:calc(18px + var(--voice-level)*19px);} .voice-orb.hearing span:nth-child(3){height:calc(22px + var(--voice-level)*22px);} .voice-orb.hearing span:nth-child(4){height:calc(18px + var(--voice-level)*19px);} .voice-orb.hearing span:nth-child(5){height:calc(13px + var(--voice-level)*15px);} @keyframes azVoiceBreath{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.86;transform:scale(1.08)}} .conversation-avatar.speaking .avatar-disc,.conversation-identity.speaking .avatar-disc{animation:avatarTalk 2.2s ease-in-out infinite;} .conversation-compose textarea{padding:1rem;border-radius:12px;border:1px solid rgba(22,20,18,.16);transition:border-color .2s ease,box-shadow .2s ease;} .conversation-compose textarea:focus{outline:none;border-color:rgba(197,94,43,.7);box-shadow:0 0 0 4px rgba(197,94,43,.12);} .conversation-compose textarea[data-provisional="true"]{border-style:dashed;} .conversation-primary-action{width:100%;display:flex;align-items:center;justify-content:center;gap:.65rem;padding:.8rem 1.2rem;font:inherit;font-weight:950;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease;} .conversation-primary-action.is-recording{background:#171513;}.conversation-primary-action.is-send{background:#2f6a43;} .conversation-primary-action:disabled{cursor:wait;opacity:.58;box-shadow:none;} .conversation-primary-icon{font-size:1.05rem;line-height:1;} .conversation-diagnostic{margin:.1rem 0 0;opacity:.88;} .conversation-final-actions{margin-top:.2rem;} @media (min-width:701px){.conversation-title-row h2{white-space:nowrap;}.conversation-log{padding-inline:.25rem;}} @media (max-width:700px){ .conversation-dialog{max-width:none;} .conversation-identity .avatar-disc{width:50px;height:50px;flex-basis:50px;} .conversation-identity .avatar-disc i{bottom:9px;}.conversation-identity .avatar-disc i:first-of-type{left:15px;}.conversation-identity .avatar-disc i:last-of-type{right:15px;} .conversation-title-row{min-height:auto;} .conversation-message.assistant{max-width:97%;}.conversation-message.user{max-width:94%;} .conversation-primary-action{border-radius:12px;} } @media (max-height:720px) and (min-width:701px){.conversation-log{min-height:90px;max-height:160px;}.voice-orb{width:62px;height:62px;flex-basis:62px;}.conversation-compose textarea{min-height:66px;}} @media (prefers-reduced-motion:reduce){.voice-orb.listening::before,.conversation-avatar.speaking .avatar-disc,.conversation-identity.speaking .avatar-disc{animation:none;}.conversation-primary-action{transition:none;}} /* ========================================================= V6.3.1 — MOBILE CONVERSATION LOCK Geste audio explicite + éditeur placé sous la bulle AZ ========================================================= */ .conversation-start-gate{ padding:.85rem 1rem; display:flex;align-items:center;justify-content:center;gap:.7rem; font:inherit;cursor:pointer; } .conversation-start-gate[hidden]{display:none;} .conversation-start-gate span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);} .conversation-shell[data-voice-state="awaiting-gesture"] .conversation-state-dot, .conversation-shell[data-voice-state="starting"] .conversation-state-dot{ background:var(--accent);box-shadow:0 0 0 6px rgba(197,94,43,.13) ;} @media (max-width:700px){ .conversation-dialog{ inset:var(--az-visual-top,0px) 0 auto 0;margin:0; width:100vw;height:var(--az-visual-height,100dvh);max-height:var(--az-visual-height,100dvh); border-radius:0;overflow:hidden ;} .conversation-shell{ align-items:stretch;justify-content:flex-start; scroll-padding-top:.65rem;scroll-padding-bottom:1rem ;} .conversation-progress{order:3;flex:0 0 auto;} .conversation-log{ border:1px solid rgba(22,20,18,.08); background:rgba(255,255,255,.44) ;} .conversation-compose{ position:relative;z-index:3; background:linear-gradient(to bottom,rgba(244,239,231,.98),rgba(244,239,231,.98)) ;} .conversation-compose textarea{ line-height:1.45 ;} .voice-orb{margin:.12rem auto;} .conversation-final-actions{order:10;flex:0 0 auto;} .conversation-diagnostic{order:11;flex:0 0 auto;} /* Quand le clavier apparaît, l'essentiel reste visible : dernière bulle AZ puis texte dicté/modifiable. */ .conversation-shell.keyboard-open .conversation-title-row, .conversation-shell.keyboard-open .conversation-progress, .conversation-shell.keyboard-open .voice-orb, .conversation-shell.keyboard-open .conversation-privacy{display:none;} .conversation-shell.keyboard-open .conversation-header{min-height:44px;} .conversation-shell.keyboard-open .conversation-identity .avatar-disc{width:42px;height:42px;flex-basis:42px;} .conversation-shell.keyboard-open .conversation-log{max-height:108px;min-height:58px;} .conversation-shell.keyboard-open .conversation-compose{scroll-margin-top:.5rem;} .conversation-shell.keyboard-open .conversation-compose textarea{min-height:112px;max-height:calc(var(--az-visual-height,100dvh) - 205px);} .conversation-shell.input-focused .conversation-compose{border-radius:12px;} } /* ========================================================= V6.3.2 — IDENTITY LOCK Logo AZ officiel : en-tête, pied de page, chat et PWA ========================================================= */ .brand-logo{ width:44px;height:44px;flex:0 0 44px;object-fit:cover;border-radius:50%; background:#fff;border:1px solid rgba(255,255,255,.62); box-shadow:0 5px 18px rgba(0,0,0,.22) ;} .brand:hover .brand-logo{transform:translateY(-1px);} .brand-logo{transition:transform .2s ease,box-shadow .2s ease;} .avatar-disc{ overflow:hidden;background:#fff;padding:0;border-color:#fff ;} .conversation-logo{ width:100%;height:100%;display:block;object-fit:cover;border-radius:50% ;} .conversation-identity.speaking .conversation-logo{ filter:saturate(1.05) contrast(1.02) ;} @media (max-width:700px){ .brand-logo{width:40px;height:40px;flex-basis:40px;} } @media (min-width:1600px){ .brand-logo{width:52px;height:52px;flex-basis:52px;} } @media (prefers-reduced-motion:reduce){.brand-logo{transition:none;}} /* ========================================================= V6.4.0 — BILINGUAL BRIDGE Message client + traduction artisan, sans bloquer l'envoi ========================================================= */ .conversation-shell[dir=rtl] .conversation-final-title{text-align:right;} .conversation-translation-grid{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch;gap:.7rem ;} .conversation-translation-card{display:grid;gap:.45rem;min-width:0;} .conversation-translation-label{font-size:.78rem;font-weight:950;letter-spacing:.025em;color:var(--muted);} .conversation-translation-arrow{ align-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:#f1e6da;color:var(--accent);font-weight:950;border:1px solid rgba(197,94,43,.18) ;} .conversation-translation-grid .conversation-review{min-height:170px;height:100%;resize:vertical;} .conversation-translation{background:#fffaf2;border-color:rgba(47,106,67,.28);} .conversation-translation[aria-busy="true"]{ background:linear-gradient(100deg,#fffaf2 30%,#f4eadc 50%,#fffaf2 70%); background-size:220% 100%;animation:azTranslationLoading 1.5s linear infinite ;} .conversation-translation-meta{ display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap; padding:.65rem .75rem;border-radius:12px;background:#f7f1e8;border:1px solid rgba(22,20,18,.08) ;} .conversation-translation-status{font-size:.82rem;font-weight:800;color:var(--muted);} .conversation-translation-status[data-status="working"]{color:var(--accent);} .conversation-translation-status[data-status="ready"]{color:#2f6a43;} .conversation-translation-status[data-status="error"]{color:#9f2e20;} .conversation-translation-status[data-status="stale"]{color:#8b5b19;} .conversation-translation-retry{ border:0;border-radius:999px;padding:.55rem .85rem;background:#171513;color:#fff; font:inherit;font-size:.78rem;font-weight:900;cursor:pointer ;} .conversation-translation-retry:disabled{opacity:.5;cursor:wait;} @keyframes azTranslationLoading{to{background-position:-220% 0}} @media (max-width:700px){ .conversation-translation-grid{grid-template-columns:1fr;gap:.55rem;} .conversation-translation-arrow{width:30px;height:30px;margin:-.1rem auto;transform:rotate(90deg);} .conversation-translation-grid .conversation-review{min-height:145px;max-height:31svh;} .conversation-translation-meta{align-items:flex-start;flex-direction:column;} .conversation-translation-retry{width:100%;min-height:44px;} /* Pendant l'édition finale, le clavier laisse uniquement l'en-tête et les deux versions du message à l'écran. */ .conversation-shell.keyboard-open.review-focused .conversation-title-row, .conversation-shell.keyboard-open.review-focused .conversation-progress, .conversation-shell.keyboard-open.review-focused .conversation-log, .conversation-shell.keyboard-open.review-focused .conversation-start-gate, .conversation-shell.keyboard-open.review-focused .conversation-compose, .conversation-shell.keyboard-open.review-focused .conversation-state, .conversation-shell.keyboard-open.review-focused .voice-orb, .conversation-shell.keyboard-open.review-focused .conversation-privacy{display:none;} .conversation-shell.keyboard-open.review-focused .conversation-final-actions{ order:4;margin:0;scroll-margin-top:.4rem ;} .conversation-shell.keyboard-open.review-focused .conversation-translation-grid .conversation-review{ min-height:118px;max-height:calc(var(--az-visual-height,100dvh) - 250px) ;} } @media (prefers-reduced-motion:reduce){ .conversation-translation[aria-busy="true"]{animation:none;background:#fffaf2;} } /* V6.4.1 — Immersive Glass Conversation */ .conversation-gateway{width:100%;align-items:center;}.conversation-gateway:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,rgba(199,91,43,.18),transparent 38%),linear-gradient(90deg,rgba(0,0,0,.2),transparent);pointer-events:none;z-index:-1;}.gateway-stage{position:relative;align-items:center;}.gateway-avatar-glow{box-shadow:0 0 60px rgba(211,111,61,.24);z-index:-1;}.gateway-speech{backdrop-filter:blur(18px);}.gateway-speech span{text-transform:uppercase;font-size:.72rem;}.gateway-speech strong{font-weight:500;}.gateway-listen{justify-content:center;cursor:pointer;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}.gateway-listen:hover,.gateway-listen:focus-visible{transform:translateY(-3px);box-shadow:0 24px 58px rgba(153,60,27,.52),inset 0 1px rgba(255,255,255,.3);}.gateway-button-copy{flex-direction:column;}.gateway-button-copy strong{font-family:Georgia,serif;font-weight:500;}.gateway-button-copy small{margin-top:.25rem;}.fingerprint-motion{position:relative;display:grid;place-items:center;}.fingerprint-motion i{position:absolute;border:3px solid rgba(255,235,220,.88);border-bottom-color:transparent;border-radius:50%;animation:fingerprint-breathe 3.2s ease-in-out infinite;}.fingerprint-motion i:nth-child(1){width:58px;height:70px;}.fingerprint-motion i:nth-child(2){width:44px;height:56px;animation-delay:.1s;}.fingerprint-motion i:nth-child(3){width:30px;height:42px;animation-delay:.2s;}.fingerprint-motion i:nth-child(4){width:16px;height:28px;animation-delay:.3s;}.gateway-ripple{position:absolute;width:34px;height:34px;left:52px;top:46px;border:2px solid rgba(255,255,255,.8);border-radius:50%;animation:gateway-ripple 3.2s ease-out infinite;} @keyframes fingerprint-breathe{0%,65%,100%{transform:scale(.96);opacity:.72}35%{transform:scale(1.04);opacity:1}}@keyframes gateway-ripple{0%,55%{transform:scale(.45);opacity:0}68%{opacity:.8}100%{transform:scale(3.7);opacity:0}} .conversation-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(8,7,6,.68);backdrop-filter:blur(10px);}.conversation-shell{max-width:none!important;border:0!important;border-radius:0!important;column-gap:clamp(1.5rem,4vw,5rem);}.conversation-identity{align-self:stretch;flex-direction:column;align-items:flex-start!important;}.avatar-copy{left:1.2rem;bottom:1.2rem;}.conversation-title-row,.conversation-progress,.conversation-log,.conversation-start-gate,.conversation-state,.voice-orb,.conversation-compose,.conversation-resume-actions,.conversation-privacy,.conversation-final-actions{grid-column:2;}.voice-orb{margin-top:-48px;}.voice-orb.listening{filter:drop-shadow(0 0 calc(16px + 28px * var(--voice-level,0)) rgba(222,103,53,.9));animation:mic-halo 1.8s ease-in-out infinite;}.conversation-resume-actions .btn{flex:1;}.conversation-final-actions{z-index:4;}.conversation-diagnostic{display:none!important;}@keyframes mic-halo{0%,100%{box-shadow:0 0 0 0 rgba(217,112,61,.32)}50%{box-shadow:0 0 0 18px rgba(217,112,61,0)}} @media(max-width:820px){.conversation-gateway{grid-template-columns:1fr;padding:1.4rem;border-radius:12px;min-height:auto;}.gateway-copy h2{font-size:clamp(3rem,15vw,5rem);}.gateway-speech{margin-left:-.6rem;font-size:.92rem;}.gateway-listen{grid-column:1/-1;min-height:96px;max-width:none;}.fingerprint-motion{width:56px;height:56px;flex-basis:56px;}.fingerprint-motion i:nth-child(1){width:46px;height:56px;}.fingerprint-motion i:nth-child(2){width:35px;height:45px;}.fingerprint-motion i:nth-child(3){width:24px;height:34px;}.fingerprint-motion i:nth-child(4){width:13px;height:23px;}.gateway-ripple{left:40px;top:32px;}.conversation-header{order:0;}.conversation-identity{order:1;justify-content:flex-start!important;}.conversation-title-row{order:2;}.conversation-progress{order:3;}.conversation-log{order:4;}.conversation-start-gate{order:5;}.conversation-state{order:6;}.voice-orb{order:7;align-self:center;margin:0;}.conversation-compose{order:8;position:sticky;bottom:0;z-index:5;}.conversation-resume-actions{order:9;bottom:0;z-index:6;background:rgba(12,10,9,.92);padding:.5rem;border-radius:12px;}.conversation-privacy{order:10;}.conversation-final-actions{order:11;}.keyboard-open .conversation-identity{display:none!important;}.keyboard-open .conversation-title-row,.keyboard-open .conversation-progress{display:none!important;}.keyboard-open .conversation-log{max-height:88px!important;}.keyboard-open .conversation-compose{margin-top:auto;}} @media(prefers-reduced-motion:reduce){.fingerprint-motion i,.gateway-ripple,.voice-orb.listening{animation:none!important;}} /* V6.5.0 — Conversation Continuity */ .conversation-client-review{background:rgba(20,17,15,.58);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);color:#fff;} .conversation-client-review .conversation-review{width:100%;min-height:150px;background:rgba(255,255,255,.94);color:#171513;border:1px solid rgba(255,255,255,.32);border-radius:12px;padding:1rem;font:inherit;line-height:1.55;} .conversation-phone-field{font-weight:800;} .conversation-notify-choice{font-size:.9rem;}.conversation-notify-choice input{accent-color:var(--accent);} .conversation-internal-send{min-height:54px;font-weight:900;}.conversation-delivery-note{line-height:1.45;}.conversation-send-result{font-weight:750;} /* V6.5.1 — Chocolate Form Visual Lock */ .contact:before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; background-image:linear-gradient(30deg,rgba(91,55,39,.08) 12%,transparent 12.5%,transparent 87%,rgba(91,55,39,.08) 87.5%),linear-gradient(150deg,rgba(91,55,39,.08) 12%,transparent 12.5%,transparent 87%,rgba(91,55,39,.08) 87.5%); background-size:42px 74px; } .contact>.container{position:relative;z-index:1;width:min(calc(100% - clamp(1rem,3vw,3rem)),1540px);} .contact-card{ position:relative; isolation:isolate; margin:0; overflow:hidden; backdrop-filter:blur(18px); } .contact-card:before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 0 48%,rgba(255,231,210,.035) 48% 49%,transparent 49% 100%); } .contact-card label{font-size:.82rem;letter-spacing:.045em;text-transform:uppercase;} .contact-card input,.contact-card select,.contact-card textarea{ min-height:56px; border:1px solid rgba(239,191,157,.28); padding:.95rem 1.05rem; box-shadow:inset 0 1px rgba(255,255,255,.055); backdrop-filter:blur(10px); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; } .contact-card select{color-scheme:dark;} .contact-card textarea{line-height:1.6;} .contact-card input::placeholder,.contact-card textarea::placeholder{color:rgba(255,239,227,.50);} .contact-card input:hover,.contact-card select:hover,.contact-card textarea:hover{background:rgba(255,248,240,.105);border-color:rgba(239,191,157,.46);} .contact-card input:focus,.contact-card select:focus,.contact-card textarea:focus{ outline:0; background:rgba(255,248,240,.13); } .contact-card .btn-primary{ font-weight:900; letter-spacing:.025em; } .contact-card .btn-primary:hover,.contact-card .btn-primary:focus-visible{transform:translateY(-2px);box-shadow:0 20px 42px rgba(135,49,24,.44),inset 0 1px rgba(255,255,255,.25);} @media(max-width:820px){ .contact>.container{width:min(calc(100% - 1rem),1540px);} .contact-card{padding:1.15rem;border-radius:12px;} .contact-card .form-grid{grid-template-columns:1fr;gap:.9rem;} .contact-card .full{grid-column:auto;} .contact-card input,.contact-card select{min-height:54px;} .contact-card textarea{min-height:140px;} } /* ========================================================= V6.5.4 — DELIVERY TRACE & UI FINISH LOCK Modal finalisé, un seul scroll, reçu de transmission visible. ========================================================= */ .conversation-dialog{overflow:hidden!important;} .conversation-header{align-items:center!important;} .conversation-progress{grid-row:3!important;} .conversation-final-actions{ grid-row:4/6!important; min-height:0!important; max-height:100%!important; overflow:auto!important; scrollbar-gutter:stable; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:.85rem!important; } .conversation-final-title,.conversation-review,.conversation-phone-field,.conversation-notify-choice,.conversation-review-tools,.conversation-internal-send,.conversation-delivery-note,.conversation-send-result{grid-column:1/-1;} .conversation-final-title{font:700 clamp(1.25rem,2.2vw,1.75rem)/1.1 Georgia;} .conversation-review{background:rgba(255,250,244,.08)!important;border:1px solid rgba(239,171,126,.34)!important;} .conversation-phone-field span{font-weight:850;} .conversation-phone-field input{font:inherit;} .conversation-notify-choice{padding:.8rem 0;}.conversation-notify-choice input{width:20px;height:20px;flex:0 0 20px;} .conversation-internal-send{box-shadow:0 14px 30px rgba(148,53,35,.3);} .conversation-delivery-note{font-size:.82rem;} .conversation-send-result{ display:grid;gap:.35rem; } .conversation-send-result[hidden]{display:none!important;}.conversation-send-result strong{font-size:1.05rem;}.conversation-send-result span{font-size:.84rem;color:rgba(238,252,242,.82);} .conversation-send-result b{color:#fff;} .conversation-resume-actions{grid-column:2!important;} .conversation-state{grid-column:2!important;}.voice-orb{grid-column:2!important;}.conversation-compose{grid-column:2!important;} @media(max-width:820px){ .conversation-shell{overflow-y:auto!important;} .conversation-identity{height:auto!important;} .avatar-disc.avatar-portrait{flex-basis:112px!important;} .conversation-final-actions{position:relative!important;max-height:none!important;overflow:visible!important;grid-template-columns:1fr!important;border-radius:12px!important;} .conversation-final-title,.conversation-review,.conversation-phone-field,.conversation-notify-choice,.conversation-review-tools,.conversation-internal-send,.conversation-delivery-note,.conversation-send-result{grid-column:1!important;} .conversation-review{resize:none!important;} .conversation-resume-actions{position:relative!important;grid-column:auto!important;grid-row:auto!important;} } @media(max-width:480px){.conversation-review-tools{grid-template-columns:1fr!important;}.conversation-final-actions{padding:1rem!important;}.conversation-title-row h2{font-size:1.65rem!important;}} /* V6.6.1 — Conversational Geo Flow */ .conversation-geo-stage{grid-column:2;grid-row:4/9;z-index:8;display:grid;gap:1rem;align-content:start;overflow:auto;} .conversation-geo-stage[hidden]{display:none!important;}.conversation-geo-prompt{display:grid;gap:.45rem;}.conversation-geo-prompt h3{margin:0;line-height:1.2;}.conversation-geo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}.conversation-geo-choices .geo-choice{min-height:58px;border:1px solid rgba(216,124,73,.42);font-weight:850;}.conversation-geo-choices .geo-choice:hover,.conversation-geo-choices .geo-choice:focus-visible{background:rgba(216,124,73,.2);border-color:#d87c49;}.conversation-geo-picker{border-color:rgba(216,124,73,.35)!important;}.conversation-geo-picker[hidden]{display:none!important;} @media(max-width:820px){.conversation-geo-stage{order:10;position:relative;grid-column:auto;grid-row:auto;border-radius:12px;overflow:visible;}} /* ========================================================= V6.6.2 — VOCAL UI STABILIZATION LOCK Une seule étape visible, contrastes verrouillés, aucun chevauchement. ========================================================= */ .conversation-dialog[open]{display:block!important;overflow:hidden!important;background:rgba(8,6,5,.78)!important;} .conversation-shell{ --panel:#1a1411;--panel-2:#2a1c17;--line:rgba(220,128,77,.38);--cream:#fff7ee;--muted:#d7c4b8; } .conversation-header{z-index:20;} .conversation-close{top:1rem!important;right:1rem!important;} .conversation-identity{grid-column:1!important;grid-row:2/4!important;} .avatar-copy span,.avatar-copy small{color:var(--muted)!important;} .conversation-log,.conversation-start-gate,.conversation-state,.voice-orb,.conversation-compose,.conversation-resume-actions,.conversation-privacy,.conversation-final-actions,.conversation-geo-stage{grid-column:2!important;} .conversation-log{scrollbar-gutter:stable!important;} .conversation-message{color:var(--cream)!important;background:rgba(255,247,238,.09)!important;border:1px solid rgba(255,255,255,.08)!important;} .conversation-state{margin-top:.75rem!important;} .conversation-compose{margin-top:.75rem!important;} .conversation-compose textarea,.conversation-review{color:#fff9f2!important;background:#2b211d!important;border:1px solid rgba(225,139,88,.48)!important;caret-color:#fff!important;} .conversation-compose textarea::placeholder,.conversation-review::placeholder{color:#cdb7aa!important;opacity:1!important;} .conversation-resume-actions{margin-top:.75rem!important;} /* stage isolation */ .conversation-shell.stage-geo .conversation-log,.conversation-shell.stage-geo .conversation-state,.conversation-shell.stage-geo .voice-orb,.conversation-shell.stage-geo .conversation-compose,.conversation-shell.stage-geo .conversation-resume-actions,.conversation-shell.stage-geo .conversation-privacy{display:none!important;} .conversation-shell.stage-review .conversation-log,.conversation-shell.stage-review .conversation-state,.conversation-shell.stage-review .voice-orb,.conversation-shell.stage-review .conversation-compose,.conversation-shell.stage-review .conversation-resume-actions,.conversation-shell.stage-review .conversation-privacy{display:none!important;} .conversation-shell.stage-geo .conversation-geo-stage,.conversation-shell.stage-review .conversation-final-actions{grid-row:3!important;display:block!important;min-height:0!important;height:100%!important;max-height:none!important;overflow:auto!important;} .conversation-geo-stage{padding:1.15rem!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(25,19,16,.98),rgba(57,35,27,.96))!important;border:1px solid var(--line)!important;color:var(--cream)!important;box-shadow:none!important;} .conversation-geo-prompt h3{color:var(--cream)!important;font-size:clamp(1.3rem,2.2vw,2rem)!important;max-width:34ch!important;} .conversation-geo-choices{margin-top:1rem!important;}.conversation-geo-choices .geo-choice{color:#fff7ef!important;background:rgba(255,247,238,.08)!important;border-color:rgba(224,129,76,.48)!important;} .conversation-geo-picker{margin-top:1rem!important;color:var(--cream)!important;background:#211813!important;border:1px solid var(--line)!important;} .conversation-geo-picker h3,.conversation-geo-picker p,.conversation-geo-picker strong,.conversation-geo-picker span,.conversation-geo-picker small{color:inherit!important;} .conversation-geo-picker input{color:#211813!important;background:#fff7ef!important;} .geo-status{color:#ffd9c2!important;}.geo-attribution,.geo-attribution a{color:#d9c0b1!important;} .conversation-final-actions{padding:1.15rem!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(25,19,16,.98),rgba(57,35,27,.96))!important;border:1px solid var(--line)!important;color:var(--cream)!important;box-shadow:none!important;display:block!important;} .conversation-final-actions[hidden]{display:none!important;}.conversation-final-title{margin-bottom:.75rem!important;text-align:left!important;} .conversation-review{display:block!important;width:100%!important;padding:1rem!important;border-radius:12px!important;} .conversation-phone-field span{color:#f1d7c7!important;} .conversation-review-tools .btn,.conversation-internal-send{min-height:54px!important;border-radius:12px!important;} @media(max-width:820px){ .conversation-shell{flex-direction:column!important;height:100dvh!important;padding:max(.75rem,env(safe-area-inset-top)) .75rem max(.75rem,env(safe-area-inset-bottom))!important;gap:.65rem!important;overflow:hidden!important;} .conversation-header{flex:0 0 auto!important;}.conversation-identity{flex:0 0 112px!important;display:flex!important;flex-direction:row!important;align-items:center!important;} .avatar-disc.avatar-portrait{flex:0 0 92px!important;border-radius:12px!important;}.avatar-copy{position:static!important;margin-left:.75rem!important;padding:.75rem!important;} .conversation-title-row{flex:0 0 auto!important;}.conversation-title-row h2{font-size:clamp(1.65rem,8vw,2.25rem)!important;text-align:center!important;} .conversation-log{flex:1 1 auto!important;min-height:0!important;max-height:none!important;} .conversation-state,.voice-orb,.conversation-compose,.conversation-resume-actions,.conversation-privacy{flex:0 0 auto!important;} .conversation-compose{grid-template-columns:1fr!important;}.conversation-primary-action{width:100%!important;} .conversation-shell.stage-geo .conversation-identity,.conversation-shell.stage-review .conversation-identity{display:none!important;} .conversation-shell.stage-geo .conversation-title-row,.conversation-shell.stage-review .conversation-title-row{display:block!important;} .conversation-shell.stage-geo .conversation-geo-stage,.conversation-shell.stage-review .conversation-final-actions{flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:auto!important;} .conversation-geo-choices{grid-template-columns:1fr!important;}.conversation-geo-picker .geo-map{min-height:240px!important;} .conversation-review{min-height:150px!important;max-height:28vh!important;}.conversation-review-tools{grid-template-columns:1fr!important;} .conversation-resume-actions{grid-template-columns:1fr!important;} .keyboard-open .conversation-title-row{display:none!important;}.keyboard-open .conversation-final-actions{flex:1 1 auto!important;} } @media(max-height:720px) and (min-width:821px){.conversation-shell{padding:.85rem 1.2rem!important;}.conversation-title-row h2{font-size:2rem!important;}.avatar-copy{padding:.7rem!important;}.conversation-review{min-height:130px!important;max-height:26vh!important;}} /* V6.6.8 — Dual Avatar Visual Lock: approved two-view integration only */ .conversation-gateway{ position:relative; } .conversation-gateway::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle at 8% 22%,rgba(220,132,76,.10) 0 1px,transparent 1px), linear-gradient(90deg,transparent 0 49.8%,rgba(229,151,98,.16) 50%,transparent 50.2%); background-size:18px 18px,100% 100%; opacity:.45; } .gateway-copy,.gateway-stage{position:relative;z-index:1;} .gateway-speech{margin-left:0!important;border-color:rgba(225,139,85,.55)!important;} .gateway-benefits{display:flex;} .conversation-identity{ justify-content:flex-end!important; } .conversation-identity::before{ content:"";position:absolute;inset:8% 2% 10%; border:1px solid rgba(218,126,73,.24);border-radius:46% 46% 30px 30px; box-shadow:0 0 70px rgba(177,79,37,.16);pointer-events:none; } .conversation-log,.conversation-compose,.conversation-state{position:relative;z-index:2;} @media(max-width:820px){ .gateway-stage{grid-template-columns:130px 1fr!important;min-height:400px!important;gap:.5rem;} .gateway-avatar{height:320px!important;} .conversation-shell{display:flex!important;} .conversation-identity{position:relative!important;min-height:220px!important;max-height:240px!important;overflow:hidden;} .avatar-disc.avatar-portrait{position:absolute!important;inset:0!important;width:190px!important;height:240px!important;} .conversation-avatar-image{object-position:50% 12%!important;} } /* V6.6.8 — Six-Audit Recovery Lock: defensive layout only */ .conversation-gateway .gateway-avatar, .conversation-dialog .conversation-identity{contain:layout paint;isolation:isolate;} .conversation-gateway .gateway-avatar img, .conversation-dialog .conversation-avatar-image{display:block;max-width:100%;height:auto;} .conversation-dialog .conversation-shell{box-sizing:border-box;} .conversation-dialog .conversation-log, .conversation-dialog textarea{overflow-wrap:anywhere;} @media (max-width:700px){ .conversation-dialog .conversation-shell{width:100%;max-width:none;} .conversation-dialog .conversation-identity{min-width:0;} .conversation-dialog .conversation-avatar-image{max-height:26svh;object-fit:contain;object-position:center bottom;} } @media (prefers-reduced-motion:reduce){ .gateway-avatar-glow,.conversation-state-dot,.voice-orb span{animation:none!important;transition:none!important;} } /* V6.6.8 — FINAL RESPONSIVE GEOMETRY LOCK (audit 5 correction) */ @media (min-width:821px){ .conversation-shell{ display:grid!important; grid-template-columns:clamp(280px,31vw,430px) minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr)!important; column-gap:clamp(1.2rem,3vw,3rem)!important; } .conversation-header{ grid-column:1!important;grid-row:1/3!important; position:relative!important;display:block!important; width:100%!important;height:100%!important;min-height:0!important; } .conversation-header .conversation-identity{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important;min-height:0!important; display:block!important;overflow:hidden!important; } .conversation-header .avatar-disc.avatar-portrait{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; } .conversation-header .conversation-avatar-image{ display:block!important;width:100%!important;height:100%!important;max-width:none!important; object-fit:cover!important;object-position:50% 15%!important; } .conversation-close{position:fixed!important;top:1rem!important;right:1rem!important;} .conversation-title-row{grid-column:2!important;grid-row:1!important;} .conversation-progress,.conversation-log,.conversation-start-gate,.conversation-state,.voice-orb,.conversation-compose,.conversation-resume-actions,.conversation-privacy,.conversation-final-actions,.conversation-geo-stage{grid-column:2!important;} .conversation-log{grid-row:2!important;} } @media (max-width:820px){ .conversation-header{display:flex!important;position:relative!important;width:100%!important;height:auto!important;} .conversation-header .conversation-identity{position:relative!important;width:100%!important;min-width:0!important;} .conversation-header .avatar-disc.avatar-portrait{position:relative!important;inset:auto!important;} .conversation-header .conversation-avatar-image{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important;} .conversation-close{position:absolute!important;top:.25rem!important;right:.25rem!important;} .conversation-gateway{overflow:hidden!important;} .gateway-stage{min-width:0!important;width:100%!important;} .gateway-avatar{min-width:0!important;max-width:100%!important;overflow:hidden!important;} .gateway-avatar img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important;} } /* ==========================================================================\n KechElec v1.4.1 — Electric Pantone UI foundation\n PANTONE anchors: 1505 C / 4132 C (dark), 4001 C / 2204 C (light).\n Derived darker/lighter tones are used where contrast requires it.\n ========================================================================== */ :root{ --kech-dark:#1C1D26; --kech-dark-panel:#2B2C38; --kech-dark-card:#3B3B4B; --kech-light:#F8F5E7; --kech-light-cool:#EEF4F6; --kech-text:#292A34; --kech-orange-aa:#B84400; --ink:var(--kech-text); --paper:var(--kech-light); --clay:var(--kech-orange-aa); --ochre:var(--kech-4001); --mocha:var(--kech-4132); --gold:var(--kech-2204); --muted:#5F6470; --line:rgba(59,59,75,.18); } body{background:linear-gradient(180deg,var(--kech-light),#fff 48%,var(--kech-light-cool));color:var(--ink);} .header.scrolled{background:rgba(42,43,55,.96);} .brand-mark{background:linear-gradient(135deg,var(--kech-1505),var(--kech-2204));color:var(--kech-4132);} .eyebrow{color:var(--kech-orange-aa);} .hero .eyebrow{color:var(--kech-4001);} .btn-primary{background:var(--kech-4132);color:#fff;border-color:rgba(255,107,0,.6);box-shadow:inset 0 -3px 0 var(--kech-1505);} .btn-primary:hover{background:#2E2F3C;} .story,.precision,.delivery,.footer{background:var(--kech-4132);} .story .eyebrow{color:var(--kech-4001);} .beforeafter{background:linear-gradient(135deg,var(--kech-2204),#DCE9ED);} .testimonial{background:var(--kech-4132);border-block:4px solid var(--kech-1505);} input,select,textarea{border-color:rgba(59,59,75,.26);} :focus-visible{outline:3px solid var(--kech-1505);outline-offset:3px;} /* V2.0 Art Direction — hero picture sources */ .hero-v14 .hero-slide picture{display:block;width:100%;height:100%;} .hero-v14 .hero-slide picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;} /* ===== legacy mobile absorbed @media (max-width:700px) ===== */ @media (max-width:700px){ /* KechElec V2.0 — Interface mobile autonome Chargé uniquement jusqu'à 700 px. */ @media(max-width:960px){ .menu{display:block;}.nav{display:none;position:absolute;top:var(--header);left:0;right:0;background:#171513;padding:1.2rem;flex-direction:column;align-items:flex-start;}.nav.open{display:flex;} .intro,.story-step,.precision-wrap,.ba-wrap,.contact-grid{grid-template-columns:1fr;} .story-step:nth-child(even) .story-image{order:0;} .service-grid{grid-template-columns:repeat(2,1fr);} .precision-image{min-height:65svh;}.precision-copy{padding:4rem 1rem;} } @media(max-width:640px){ .container{width:min(calc(100% - 1.2rem),var(--max));} .hero-content{padding-bottom:2.5rem;}.actions .btn{width:100%;}.hero-proof{gap:1rem;}.hero-proof>div{width:calc(50% - .5rem);} .service-grid,.form-grid,.footer-grid{grid-template-columns:1fr;}.full{grid-column:auto;} .story-image{min-height:380px;}.services-head{display:block;}.services-head p{margin-top:1rem;} .delivery{min-height:78svh;}.fab{width:54px;height:54px;} } @media(max-width:960px){ .hero-v14 .hero-content{padding-top:calc(var(--header) + 5rem);} .method-cards{grid-template-columns:repeat(3,1fr);} } @media(max-width:640px){ .hero-v14{align-items:end;}.hero-v14 .hero-content{align-self:end;} .hero-v14 .hero-slide img{object-position:center center;}.hero-v14 .hero-slide:nth-child(1) img{object-position:57% center;}.hero-v14 .hero-slide:nth-child(2) img{object-position:58% center;}.hero-v14 .hero-slide:nth-child(3) img{object-position:47% center;}.hero-v14 .hero-slide:nth-child(4) img{object-position:42% center;}.hero-v14 .hero-slide:nth-child(5) img{object-position:55% center;} .hero-controls{right:auto;left:50%;transform:translateX(-50%);bottom:1.25rem;}.hero-arrow{display:none;} .method-strip{padding:1.8rem 0;}.method-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;gap:.75rem;}.method-card{flex:0 0 78%;min-height:170px;scroll-snap-align:start;} } @media(max-width:960px){ .hero-v14{min-height:700px;} .hero-v14 .hero-content{padding:calc(var(--header) + 4rem) 0 4.6rem;} .hero-v14 h1{font-size:clamp(2.7rem,8vw,4.7rem);max-width:10.5ch;} .hero-overlay{ background: linear-gradient(90deg,rgba(5,5,5,.81),rgba(5,5,5,.43) 65%,rgba(5,5,5,.13)), linear-gradient(0deg,rgba(5,5,5,.46),transparent 55%); } } @media(max-width:640px){ .hero-v14{min-height:720px;} .hero-v14 .hero-content{padding:calc(var(--header) + 3.6rem) 0 5.1rem;} .hero-v14 h1{font-size:clamp(2.45rem,12vw,3.65rem);max-width:10.8ch;line-height:1;} .hero-v14 .hero-copy{font-size:.98rem;max-width:32ch;margin-top:.9rem;} .hero-v14 .actions{margin-top:1.2rem;} .hero-overlay{ background: linear-gradient(0deg,rgba(3,3,3,.90) 0%,rgba(3,3,3,.65) 42%,rgba(3,3,3,.12) 76%), linear-gradient(90deg,rgba(3,3,3,.20),transparent 70%); } } @media(max-width:960px){ .method-detail{grid-template-columns:1fr;min-height:0;} .method-detail-media{min-height:360px;aspect-ratio:16/10;} } @media(max-width:640px){ .method-heading{text-align:left;} .method-details{margin-top:1rem;} .method-detail{border-radius:12px;} .method-detail-media{min-height:240px;aspect-ratio:4/3;} .method-detail-copy{padding:1.35rem;} .method-detail-no{font-size:2.7rem;} .method-detail-copy h3{font-size:1.85rem;} .method-detail-copy p{font-size:1rem;} } @media (max-width:700px){ .method-strip{ padding:1.75rem 0 2.15rem; } .method-heading{ margin-bottom:1.1rem; text-align:left; } .method-cards{ display:block; overflow:visible; padding:0; } .method-card{ width:100%; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:1rem .95rem; margin:0; border:0; border-top:1px solid rgba(23,21,19,.13); border-radius:0; overflow:visible; background:transparent; color:#171513; isolation:auto; scroll-snap-align:none; outline:0; } .method-card:first-of-type{ border-top:0; } .method-card img, .method-card:after, .method-card.active:before{ display:none; } .method-card:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; } .method-card .method-no{ position:static; display:block; min-width:2.35rem; color:var(--clay); font-size:1.45rem; line-height:1; text-shadow:none; } .method-card-copy{ position:static; display:grid; gap:.18rem; min-width:0; text-align:left; } .method-card-copy strong{ color:#171513; font-size:1.08rem; line-height:1.15; } .method-card-copy small{ display:block; color:#6d655e; font-size:.86rem; line-height:1.35; } .method-card::before{ content:"+"; position:static; display:grid; place-items:center; grid-column:3; grid-row:1; width:2rem; height:2rem; border:1px solid rgba(23,21,19,.2); border-radius:50%; color:#171513; font-size:1.35rem; line-height:1; } .method-card.active{ margin-top:.15rem; padding-top:1.05rem; background:#fffaf4; box-shadow:inset 4px 0 0 var(--clay); outline:0; } .method-card.active::before{ content:"−"; display:grid; } .method-details{ display:none; } /* Les panneaux sont déplacés par JS juste après leur bouton. */ .method-cards > .method-detail{ min-height:0; margin:0 0 .55rem; border-radius:0 0 .95rem .95rem; overflow:hidden; background:#171513; color:#fff; animation:none; } .method-cards > .method-detail[hidden]{ display:none; } .method-cards > .method-detail .method-detail-copy{ display:block; padding:1.05rem 1.05rem .95rem; } .method-cards > .method-detail .method-detail-no{ display:none; } .method-cards > .method-detail h3{ margin:0; color:#fff; font-size:1.45rem; line-height:1.12; } .method-cards > .method-detail p{ margin:.65rem 0 0; max-width:none; color:rgba(255,255,255,.82); font-size:.96rem; line-height:1.58; } .method-cards > .method-detail .method-detail-media{ min-height:0; height:clamp(170px,48vw,220px); aspect-ratio:auto; background:#282522; } .method-cards > .method-detail .method-detail-media img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* Le contenu textuel apparaît avant la photographie. */ .method-cards > .method-detail{ display:flex; flex-direction:column; } .method-cards > .method-detail .method-detail-copy{order:1;} .method-cards > .method-detail .method-detail-media{order:2;} body.rtl-page .method-heading, body.rtl-page .method-card-copy{ text-align:right; } body.rtl-page .method-card.active{ box-shadow:inset -4px 0 0 var(--clay); } } /* ========================================================= V2.0 — Reconstruction mobile indépendante ========================================================= */ :root{--header:68px;} html,body{overflow-x:hidden;} body{font-size:16px;} .container{width:min(calc(100% - 1.25rem),var(--max));} section{padding:3.25rem 0;} /* Navigation tactile */ .header{height:var(--header);} .header-inner{gap:.65rem;} .brand{gap:.55rem;font-size:.88rem;} .brand-mark{width:40px;height:40px;} .langs{gap:.2rem;} .langs a{padding:.27rem .38rem;font-size:.78rem;} /* Hero mobile réellement autonome */ .hero-v14{ min-height:100svh; align-items:end; } .hero-v14 .hero-content{ align-self:end; padding:calc(var(--header) + 2.5rem) 0 5.4rem; } .hero-v14 h1{ font-size:clamp(2.45rem,12vw,3.7rem); max-width:10.8ch; line-height:1; } .hero-v14 .hero-copy{ max-width:33ch; font-size:.98rem; margin-top:.9rem; } .hero-v14 .actions{margin-top:1.2rem;} .actions .btn{width:100%;} .hero-proof{gap:.75rem;margin-top:1.6rem;} .hero-proof>div{width:calc(50% - .4rem);} .hero-controls{right:auto;left:50%;transform:translateX(-50%);bottom:1.1rem;} .hero-arrow{display:none;} /* Transition serrée entre la méthode et le manifeste AZ */ .method-strip{ padding:1.6rem 0 1.35rem; } .method-strip + section{ padding-top:2.1rem; } .method-cards > .method-detail{ margin-bottom:.3rem; } .method-cards > .method-detail .method-detail-media{ height:clamp(165px,46vw,210px); } /* Manifeste */ .intro{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; } .intro p:last-child{ font-size:1.06rem; } /* Les six engagements : aucun héritage de hauteur desktop */ .story{padding:3.5rem 0;} .story-step{ display:flex; flex-direction:column; gap:1rem; margin-top:2.4rem; align-items:stretch; } .story-step:nth-child(even) .story-image{order:0;} .story-image{ order:0; min-height:0; height:auto; aspect-ratio:4/3; border-radius:12px; } .story-image img{ width:100%; height:100%; object-fit:cover; } .story-text{ order:1; } .step-no{ display:block; margin:0 0 .3rem; font-size:2.9rem; line-height:.9; } .story-text h3{font-size:1.6rem;} .story-text p{ margin-top:.65rem; max-width:none; } .story-step + .story-step{ margin-top:2.8rem; } /* Services : chaque titre habille sa photographie */ .services-head{ display:block; } .services-head p{margin-top:.8rem;} .service-grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; } .service{ min-height:0; height:clamp(300px,92vw,410px); } .service:after{ background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.48) 38%,rgba(0,0,0,.05) 72%); } .service-content{ inset:auto 1.15rem 1.15rem; } .service-content h3{ font-size:1.55rem; color:#fff; } .service p{ display:block; font-size:.9rem; line-height:1.4; } /* Carte service mise en avant sur les petits écrans */ .service:last-child .service-content{ padding:.85rem .9rem; margin:-.85rem -.9rem; border-radius:12px; background:rgba(12,12,12,.42); backdrop-filter:blur(4px); } /* Sections lourdes : flux naturel */ .precision-wrap, .ba-wrap, .contact-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; } .precision-image{ min-height:0; height:clamp(310px,95vw,460px); } .precision-copy{padding:3rem .7rem;} .compare{aspect-ratio:4/3;} .form-grid,.footer-grid{grid-template-columns:1fr;} .full{grid-column:auto;} .delivery{min-height:72svh;} .delivery-content{padding:3rem 0;} .fab{width:54px;height:54px;} /* RTL mobile */ body.rtl-page .story-text, body.rtl-page .services-head, body.rtl-page .service-content{ text-align:right; } @media (max-width:700px){ .hero-progress{bottom:.72rem;width:34vw;} .contact-direct{grid-template-columns:1fr;margin-top:1.1rem;} .contact-direct small{grid-column:1;} } /* V5.2 — Samsung / Chrome mobile Les slides restent animées même lorsque le système réduit les mouvements. Seul le zoom est neutralisé dans ce cas. */ .hero-slide{will-change:opacity,transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;} .hero-slide img{transform:translateZ(0);-webkit-transform:translateZ(0);} @media (prefers-reduced-motion: reduce){ .hero-slide{transition:opacity .75s ease!important;} .hero-slide.active{animation:none!important;transform:scale(1.02)!important;} .hero-progress-bar{animation-duration:7600ms!important;} } /* V5.3 — garde-fou spécifique aux pages arabe et darija sur mobile */ @media (max-width:700px){ body.rtl-page .hero-v14{ min-height:720px!important; background-image:url("/assets/images/kechelec-diagnostic-installation-electrique-marrakech-desktop.webp")!important; background-size:cover!important; background-position:57% center!important; } body.rtl-page .hero-v14 .hero-content{ display:block!important; padding:calc(var(--header) + 3.6rem) 0 5.1rem!important; align-self:end!important; } body.rtl-page .hero-v14 .hero-content, body.rtl-page .hero-v14 .hero-content *{ visibility:visible!important; } } /* V5.5 — RTL horizontal overflow lock (Samsung/Chromium) */ @media (max-width:700px){ html{overflow-x:hidden!important;max-width:100%!important;} body.rtl-page{overflow-x:hidden!important;max-width:100%!important;position:relative!important;} body.rtl-page .header, body.rtl-page main, body.rtl-page .footer, body.rtl-page section{max-width:100vw!important;overflow-x:clip;} body.rtl-page .skip:not(:focus){position:fixed!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;clip-path:inset(50%)!important;overflow:hidden!important;} } /* V2.0 Art Direction — mobile-safe hero composition */ .hero-v14 .hero-slide picture{display:block;width:100%;height:100%;} .hero-v14 .hero-slide picture img{width:100%;height:100%;object-fit:cover;object-position:center;} .hero-v14 .hero-overlay{background:linear-gradient(180deg,rgba(7,7,9,.20) 0%,rgba(7,7,9,.42) 34%,rgba(7,7,9,.88) 78%,rgba(7,7,9,.96) 100%),linear-gradient(90deg,rgba(7,7,9,.62),rgba(7,7,9,.08) 72%);} } /* ===== legacy desktop absorbed @media (min-width:701px) and (max-width:1599px) ===== */ @media (min-width:701px) and (max-width:1599px){ /* KechElec V2.0 — Desktop / grandes tablettes Chargé uniquement à partir de 701 px. */ @media (min-width: 701px){ .method-detail{ grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); } .method-detail-copy{order:1;} .method-detail-media{order:2;} } @media (min-width:701px) and (max-width:960px){ .method-detail{ grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); } .method-detail-media{ min-height:380px; aspect-ratio:auto; } .method-detail-copy{ padding:2rem; } } /* Composition desktop explicitement isolée */ @media (min-width:701px){ .intro{grid-template-columns:.9fr 1.1fr;} .story-step{grid-template-columns:1fr 1fr;} .precision-wrap{grid-template-columns:1.2fr .8fr;} .ba-wrap{grid-template-columns:.7fr 1.3fr;} .contact-grid{grid-template-columns:.75fr 1.25fr;} .service-grid{grid-template-columns:repeat(3,1fr);} .footer-grid{grid-template-columns:1.4fr 1fr 1fr;} .method-cards{display:grid;grid-template-columns:repeat(5,1fr);} } @media (min-width:701px) and (max-width:960px){ .service-grid{grid-template-columns:repeat(2,1fr);} } /* V5.0 — rythme narratif desktop */ @media (min-width:701px){ .story{padding-block:clamp(5.5rem,8vw,8rem);} .story-step{min-height:auto;} .story-step:nth-of-type(2), .story-step:nth-of-type(5){grid-template-columns:.9fr 1.1fr;} .story-step:nth-of-type(4){grid-template-columns:1.08fr .92fr;} .story-step:nth-of-type(6){grid-template-columns:1.15fr .85fr;} } } /* ===== legacy tv absorbed @media (min-width:1600px) ===== */ @media (min-width:1600px){ /* KechElec V2.0 — Télévision / très grands écrans Lecture à distance et composition panoramique. */ :root{--max:1540px;--header:88px;} body{font-size:18px;} .container{width:min(calc(100% - 5rem),var(--max));} .header{height:var(--header);} .brand-mark{width:52px;height:52px;} .nav{font-size:1rem;gap:1.6rem;} .hero-v14{min-height:clamp(820px,92svh,1100px);} .hero-v14 h1{font-size:clamp(5.2rem,6.4vw,8.3rem);} .hero-v14 .hero-copy{font-size:1.35rem;max-width:62ch;} .hero-v14 .hero-content{padding-bottom:6rem;} .hero-proof strong{font-size:2rem;} section{padding:clamp(7rem,9vw,11rem) 0;} .method-card{min-height:220px;} .method-card-copy strong{font-size:1.3rem;} .method-card-copy small{font-size:.9rem;} .method-detail{min-height:520px;} .method-detail-media{min-height:520px;} .service{min-height:520px;} .precision-wrap{min-height:88svh;} .delivery{min-height:94svh;} /* V5.0 — grand écran : lecture panoramique sans sur-espacement */ .story{padding-block:7rem;} .story-step{margin-top:5rem;gap:5rem;} .story-image{min-height:520px;} .story-step:nth-of-type(2) .story-image, .story-step:nth-of-type(5) .story-image{min-height:460px;} .story-step:nth-of-type(4) .story-image{min-height:430px;} .story-step:nth-of-type(6) .story-image{min-height:580px;} @media (min-width:1600px){ .hero-progress{bottom:1.7rem;width:22rem;height:3px;} .contact-direct{max-width:44rem;gap:1rem;} .contact-direct-link{min-height:3.4rem;font-size:1.05rem;} } } /* ===== geo foundation absorbed ===== */ .geo-picker{grid-column:1/-1;margin:1rem 0;padding:clamp(1rem,2vw,1.35rem);border:1px solid rgba(255,107,0,.42);background:linear-gradient(145deg,rgba(28,29,38,.94),rgba(59,59,75,.82));color:#FAF7E8;box-shadow:0 16px 42px rgba(8,9,14,.24);}.geo-picker-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem;}.geo-picker-head h3{margin:.15rem 0 .3rem;font:700 clamp(1.2rem,2.2vw,1.65rem)/1.1 Georgia,serif;}.geo-picker-head p{margin:0;color:rgba(250,247,232,.72);}.geo-kicker{font-size:.68rem;letter-spacing:.16em;color:#FF8A33;font-weight:900;}.geo-optional{font-size:.72rem;padding:.35rem .65rem;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:rgba(255,255,255,.7);white-space:nowrap;}.geo-actions{display:grid;grid-template-columns:auto minmax(0,1fr);}.geo-locate{border-color:rgba(255,255,255,.2)!important;background:#EEF4F6!important;color:#292A34!important;}.geo-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;}.geo-search input{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.17);border-radius:12px;padding:.75rem .9rem;background:rgba(255,255,255,.1);color:#fff;font:inherit;outline:none;}.geo-search input::placeholder{color:rgba(255,255,255,.48);}.geo-search input:focus{border-color:#FF6B00;box-shadow:0 0 0 3px rgba(255,107,0,.18);}.geo-search button{border:0;border-radius:12px;padding:.7rem 1rem;background:#B84400;color:#fff;font-weight:800;cursor:pointer;}.geo-status{min-height:1.35rem;margin:.55rem 0;font-size:.85rem;}.geo-map{height:clamp(240px,34vh,380px);background:#1C1D26;border:1px solid rgba(255,255,255,.12);z-index:0;}.geo-confirm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;margin-top:.8rem;}.geo-address{display:flex;flex-direction:column;gap:.12rem;min-width:0;}.geo-address strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.geo-address span,.geo-address small{color:rgba(255,255,255,.62);font-size:.77rem;}.geo-confirm:disabled{opacity:.45;cursor:not-allowed;}.geo-attribution{margin-top:.45rem;text-align:right;font-size:.66rem;color:rgba(255,255,255,.48);}.geo-attribution a{color:inherit;}.geo-picker.is-confirmed{border-color:rgba(73,178,111,.65);box-shadow:0 0 0 3px rgba(73,178,111,.11),0 16px 42px rgba(8,9,14,.24);}.geo-picker.is-confirmed .geo-confirm{background:#26784b;}.conversation-client-review .geo-picker{margin:.2rem 0 .8rem;}.conversation-client-review .geo-map{height:min(30vh,280px);}.contact-card .geo-picker{width:100%;max-width:none;}.leaflet-container{font-family:inherit;}.leaflet-control-attribution{font-size:9px!important;}.leaflet-popup-content{color:#292A34;}.leaflet-control-geocoder{display:none;}@media(max-width:760px){.geo-picker{border-radius:12px;padding:.9rem;}.geo-picker-head{display:block;}.geo-optional{display:inline-block;margin-top:.55rem;}.geo-actions{grid-template-columns:1fr;}.geo-search{grid-template-columns:1fr auto;}.geo-map{height:260px;}.geo-confirm-row{grid-template-columns:1fr;}.geo-confirm{width:100%;}.conversation-client-review .geo-map{height:230px;}}@media(max-width:420px){.geo-search{grid-template-columns:1fr;}.geo-search button{min-height:46px;}.geo-map{height:220px;}} /* ===== site theme absorbed ===== */ /* ========================================================================== KECHELEC — V1.1 — THÈME ÉLECTRIQUE PANTONE Responsive conversation and contact theme lock Loaded last: this file is the single visual source of truth for V7. ========================================================================== */ :root{ --az7-radius-xl:12px; --az7-radius-lg:12px; --az7-radius-md:10px; } /* Page gateway + form ------------------------------------------------------ */ .contact{ position:relative; overflow:hidden; } .contact::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; background-image: linear-gradient(30deg,rgba(92,49,33,.06) 12%,transparent 12.5%,transparent 87%,rgba(92,49,33,.06) 87.5%), linear-gradient(150deg,rgba(92,49,33,.05) 12%,transparent 12.5%,transparent 87%,rgba(92,49,33,.05) 87.5%); background-size:52px 90px; } .contact-grid{ position:relative; z-index:1; display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:min(calc(100% - clamp(1.25rem,4vw,5rem)),1540px)!important; max-width:1540px!important; } .conversation-gateway{ border:1px solid var(--az7-line)!important; overflow:hidden!important; isolation:isolate; color:var(--az7-cream)!important; background: radial-gradient(circle at 18% 44%,rgba(197,84,48,.24),transparent 28%), radial-gradient(circle at 82% 18%,rgba(213,119,79,.12),transparent 22%), linear-gradient(112deg,#110a08 0%,#2d1913 58%,#160c09 100%)!important; box-shadow:var(--az7-shadow)!important; } .conversation-gateway::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.32; background: linear-gradient(90deg,transparent 49.8%,rgba(226,135,90,.14) 50%,transparent 50.2%), radial-gradient(circle at 50% 50%,transparent 0 48%,rgba(215,118,75,.08) 48.5% 49%,transparent 49.5%); } .gateway-copy .eyebrow{ color:var(--az7-terracotta)!important; letter-spacing:.16em!important; } .gateway-copy h2{ margin:0!important; color:var(--az7-cream)!important; text-wrap:balance; } .gateway-copy .power-bridge-copy{ color:var(--az7-cream-soft)!important; } .gateway-stage{ display:grid!important; width:100%!important; } .gateway-avatar{ position:relative!important; grid-column:1!important; grid-row:1/3!important; align-self:stretch!important; width:100%!important; max-height:none!important; overflow:hidden!important; border:1px solid rgba(221,132,83,.32)!important; background:#1b100c!important; box-shadow:0 24px 64px rgba(0,0,0,.38)!important; filter:none!important; } .gateway-avatar::before{ content:""; position:absolute; z-index:2; pointer-events:none; border:1px solid rgba(235,163,119,.22); } .gateway-avatar img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; border:0!important; border-radius:inherit!important; } .gateway-avatar-glow{ position:absolute!important; inset:auto 8% 3%!important; height:18%!important; border-radius:50%!important; filter:blur(30px)!important; } .gateway-speech{ position:relative!important; align-self:end!important; width:100%!important; max-width:none!important; margin:0!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-md)!important; color:var(--az7-cream)!important; box-shadow:0 14px 38px rgba(0,0,0,.22)!important; } .gateway-speech::before{ content:""; position:absolute; inset-inline-start:-11px; width:20px; height:20px; border-inline-start:1px solid var(--az7-line); border-bottom:1px solid var(--az7-line); transform:rotate(45deg); } .gateway-speech span{ display:block!important; margin-bottom:.35rem!important; color:var(--az7-terracotta)!important; font-weight:900!important; letter-spacing:.08em!important; } .gateway-speech strong{ color:var(--az7-cream)!important; font-size:clamp(1rem,1.3vw,1.16rem)!important; line-height:1.55!important; } .gateway-listen{ position:relative!important; grid-column:2!important; grid-row:2!important; align-self:stretch!important; width:100%!important; max-width:none!important; min-height:170px!important; margin:0!important; padding:1.35rem!important; display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:center!important; justify-items:start!important; gap:1.15rem!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-lg)!important; color:var(--az7-cream)!important; background: radial-gradient(circle at 25% 50%,rgba(220,95,60,.22),transparent 28%), rgba(20,13,10,.72)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 18px 46px rgba(0,0,0,.2)!important; } .gateway-listen:hover{ transform:translateY(-2px)!important; border-color:rgba(225,124,83,.7)!important; box-shadow:0 22px 58px rgba(0,0,0,.28),0 0 0 5px rgba(198,81,52,.08)!important; } .fingerprint-motion{ width:82px!important; height:82px!important; flex:0 0 82px!important; border:1px solid rgba(229,139,94,.52)!important; border-radius:50%!important; background:radial-gradient(circle,#d76649 0 30%,#7e2d23 31% 53%,#1d110d 54%)!important; box-shadow:0 0 0 8px rgba(207,85,54,.08),0 0 34px rgba(213,92,55,.32)!important; } .gateway-button-copy{ display:grid!important; gap:.18rem!important; text-align:start!important; } .gateway-button-copy strong{ color:var(--az7-cream)!important; font-size:clamp(1.15rem,2vw,1.55rem)!important; } .gateway-button-copy small{ color:var(--az7-cream-soft)!important; font-size:.95rem!important; } /* Contact form follows the same material language */ .contact-card{ width:100%!important; max-width:none!important; border:1px solid var(--az7-line)!important; color:var(--az7-cream)!important; box-shadow:0 22px 60px rgba(39,17,10,.22)!important; } .contact-card .form-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:1rem 1.15rem!important; } .contact-card .field{ display:grid!important; gap:.45rem!important; } .contact-card .field.full{ grid-column:1/-1!important; } .contact-card label{ font-weight:850!important; } .contact-card input, .contact-card select, .contact-card textarea{ width:100%!important; min-height:56px!important; border:1px solid rgba(224,132,85,.42)!important; border-radius:12px!important; padding:.85rem 1rem!important; color:#fff8ef!important; background:rgba(255,248,238,.07)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important; } .contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus{ outline:none!important; border-color:rgba(228,118,78,.92)!important; box-shadow:0 0 0 4px rgba(204,85,55,.14)!important; } .contact-card select option{ color:#21140f; background:#fff5eb; } .contact-card .btn-primary{ width:100%!important; min-height:58px!important; border-radius:12px!important; } /* Full-screen dialog ------------------------------------------------------- */ .conversation-dialog, .conversation-dialog[open]{ position:fixed!important; inset:0!important; z-index:9999!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; overflow:hidden!important; color:var(--az7-cream)!important; background:transparent!important; } .conversation-dialog::backdrop{ background:rgba(12,6,4,.76)!important; backdrop-filter:blur(14px) saturate(.9)!important; } .conversation-shell{ position:relative!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; display:grid!important; grid-template-columns:minmax(300px,38%) minmax(0,62%)!important; grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto!important; gap:.75rem clamp(1.25rem,3vw,3.6rem)!important; padding:clamp(1rem,2.5vw,2.5rem)!important; overflow:hidden!important; color:var(--az7-cream)!important; background: radial-gradient(circle at 17% 44%,rgba(196,80,43,.23),transparent 29%), radial-gradient(circle at 82% 18%,rgba(215,111,70,.10),transparent 24%), linear-gradient(108deg,#100906 0%,#2a1711 56%,#140b08 100%)!important; } .conversation-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; background: linear-gradient(90deg,transparent 38%,rgba(225,135,89,.12) 38.08%,transparent 38.16%), radial-gradient(circle at 18% 50%,transparent 0 31%,rgba(224,127,79,.09) 31.2% 31.45%,transparent 31.7%); } .conversation-header{ position:relative!important; grid-column:1!important; grid-row:1/-1!important; width:100%!important; height:100%!important; min-height:0!important; display:block!important; overflow:hidden!important; border:1px solid var(--az7-line)!important; border-radius:52% 52% 28px 28px!important; background:#1b0f0b!important; box-shadow:0 28px 80px rgba(0,0,0,.4)!important; isolation:isolate; } .conversation-header::after{ content:""; position:absolute; inset:14px; z-index:3; pointer-events:none; border:1px solid rgba(235,160,116,.18); border-radius:52% 52% 20px 20px; } .conversation-identity{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; display:block!important; overflow:hidden!important; contain:none!important; } .avatar-disc.avatar-portrait{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; overflow:hidden!important; border:0!important; border-radius:inherit!important; background:transparent!important; } .conversation-avatar-image{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:50% 14%!important; border-radius:inherit!important; mask-image:linear-gradient(#000 0 82%,rgba(0,0,0,.86) 90%,rgba(0,0,0,.28) 97%,transparent 100%)!important; filter:saturate(.95) contrast(1.02)!important; } .avatar-copy{ display:grid!important; position:absolute!important; inset:auto 1.25rem 1.25rem!important; z-index:4!important; gap:.08rem!important; padding:1rem 1.1rem!important; border:1px solid rgba(234,149,101,.28)!important; border-radius:12px!important; color:var(--az7-cream)!important; background:rgba(20,12,9,.68)!important; backdrop-filter:blur(16px)!important; } .avatar-copy strong{ color:#fff!important; font-size:1.15rem!important; } .avatar-copy span, .avatar-copy small{ color:var(--az7-cream-soft)!important; } .conversation-close{ position:fixed!important; inset-block-start:max(1rem,env(safe-area-inset-top))!important; inset-inline-end:max(1rem,env(safe-area-inset-right))!important; z-index:100!important; width:48px!important; height:48px!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,244,232,.12)!important; border-radius:50%!important; color:#fff!important; background:rgba(21,13,10,.76)!important; backdrop-filter:blur(12px)!important; box-shadow:0 10px 30px rgba(0,0,0,.28)!important; } .conversation-close:hover{ transform:rotate(4deg) scale(1.04)!important; border-color:rgba(220,111,76,.6)!important; } .conversation-title-row{ position:relative!important; z-index:2!important; grid-column:2!important; grid-row:1!important; align-self:end!important; margin:0!important; padding:0!important; } .conversation-title-row h2{ margin:0!important; max-width:14ch!important; color:var(--az7-cream)!important; font-size:clamp(2.4rem,5vw,5.2rem)!important; line-height:.96!important; letter-spacing:-.035em!important; text-wrap:balance!important; } .conversation-lede{ position:relative!important; z-index:2!important; grid-column:2!important; grid-row:2!important; align-self:start!important; max-width:64ch!important; margin:0!important; padding:0!important; color:var(--az7-cream-soft)!important; font-size:clamp(.95rem,1.2vw,1.15rem)!important; } .conversation-progress{ display:none!important; } .conversation-log, .conversation-start-gate, .conversation-state, .voice-orb, .conversation-compose, .conversation-resume-actions, .conversation-privacy, .conversation-final-actions, .conversation-geo-stage{ position:relative!important; z-index:2!important; grid-column:2!important; min-width:0!important; } .conversation-log{ grid-row:3!important; min-height:120px!important; max-height:none!important; overflow:auto!important; padding:1rem!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-lg)!important; color:var(--az7-cream)!important; background:rgba(22,13,10,.66)!important; backdrop-filter:blur(12px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important; scrollbar-width:thin; scrollbar-color:rgba(209,102,68,.7) transparent; } .conversation-message{ max-width:min(92%,780px)!important; margin:.55rem 0!important; padding:1rem 1.1rem!important; border-radius:12px!important; line-height:1.55!important; box-shadow:none!important; } .conversation-message.assistant{ margin-inline-end:auto!important; border:1px solid #ead0bf!important; } .conversation-message.user{ margin-inline-start:auto!important; border:1px solid rgba(255,255,255,.12)!important; } .conversation-start-gate{ grid-row:3!important; align-self:center!important; justify-self:center!important; width:min(100%,540px)!important; min-height:66px!important; border:1px solid rgba(226,128,85,.62)!important; border-radius:12px!important; color:#fff!important; } .conversation-state{ grid-row:4!important; min-height:50px!important; margin:0!important; padding:.75rem 1rem!important; display:flex!important; align-items:center!important; gap:.7rem!important; border:1px solid var(--az7-line)!important; border-radius:12px!important; } .conversation-state-dot{ width:10px!important; height:10px!important; flex:0 0 10px!important; border:0!important; } .voice-orb{ grid-row:5!important; justify-self:center!important; align-self:center!important; width:84px!important; height:84px!important; margin:0!important; border:1px solid rgba(230,132,87,.6)!important; border-radius:50%!important; background:radial-gradient(circle,#ce6045 0 31%,#7f2d23 32% 54%,#1b0e0a 55%)!important; box-shadow:0 0 0 9px rgba(207,84,52,.08),0 0 36px rgba(212,89,55,.28)!important; } .voice-orb.listening{ box-shadow: 0 0 0 calc(9px + 6px * var(--voice-level,0)) rgba(207,84,52,.09), 0 0 calc(34px + 46px * var(--voice-level,0)) rgba(218,91,57,.62)!important; } .conversation-compose{ grid-row:6!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(160px,205px)!important; gap:.75rem!important; margin:0!important; padding:.75rem!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-lg)!important; background:rgba(19,11,8,.72)!important; backdrop-filter:blur(12px)!important; } .conversation-compose textarea, .conversation-review{ display:block!important; width:100%!important; border:1px solid rgba(226,133,87,.44)!important; border-radius:12px!important; padding:1rem!important; color:#fff9f2!important; background:#2c1d17!important; caret-color:#fff!important; font:inherit!important; line-height:1.5!important; } .conversation-compose textarea{ min-height:92px!important; max-height:190px!important; resize:vertical!important; } .conversation-compose textarea::placeholder, .conversation-review::placeholder{ color:#cbb4a7!important; opacity:1!important; } .conversation-primary-action{ min-height:100%!important; border:0!important; border-radius:12px!important; color:#fff!important; background:linear-gradient(135deg,var(--az7-terracotta),var(--az7-copper-2))!important; box-shadow:0 14px 34px rgba(128,39,28,.3)!important; } .conversation-primary-action:hover:not(:disabled){ transform:translateY(-1px)!important; box-shadow:0 18px 40px rgba(128,39,28,.38)!important; } .conversation-resume-actions{ grid-row:7!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:.75rem!important; margin:0!important; padding:0!important; background:none!important; position:relative!important; } .conversation-resume-actions[hidden]{ display:none!important; } .conversation-resume-actions .btn{ min-height:58px!important; border-radius:12px!important; font-weight:900!important; } .conversation-resume{ color:#2b1912!important; background:#fff7ee!important; border-color:#fff7ee!important; } .conversation-complete{ color:#fff!important; background:linear-gradient(135deg,#af4936,#78291f)!important; } .conversation-privacy{ grid-row:8!important; margin:0!important; padding:.25rem 0!important; color:#cfb9ad!important; font-size:.9rem!important; text-align:center!important; } /* Review and geolocation stages: one scroll only */ .conversation-shell.stage-geo .conversation-log, .conversation-shell.stage-geo .conversation-state, .conversation-shell.stage-geo .voice-orb, .conversation-shell.stage-geo .conversation-compose, .conversation-shell.stage-geo .conversation-resume-actions, .conversation-shell.stage-geo .conversation-privacy, .conversation-shell.stage-review .conversation-log, .conversation-shell.stage-review .conversation-state, .conversation-shell.stage-review .voice-orb, .conversation-shell.stage-review .conversation-compose, .conversation-shell.stage-review .conversation-resume-actions, .conversation-shell.stage-review .conversation-privacy{ display:none!important; } .conversation-shell.stage-geo .conversation-geo-stage, .conversation-shell.stage-review .conversation-final-actions{ grid-column:2!important; grid-row:3/9!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:auto!important; } .conversation-geo-stage, .conversation-final-actions{ padding:clamp(1rem,2vw,1.5rem)!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-lg)!important; color:var(--az7-cream)!important; background:linear-gradient(145deg,rgba(28,17,13,.98),rgba(57,32,23,.96))!important; box-shadow:0 20px 60px rgba(0,0,0,.24)!important; } .conversation-final-actions[hidden], .conversation-geo-stage[hidden]{ display:none!important; } .conversation-final-title{ display:block!important; margin:0 0 .75rem!important; color:var(--az7-cream)!important; font-size:1.08rem!important; } .conversation-review{ min-height:clamp(150px,24vh,260px)!important; max-height:34vh!important; resize:vertical!important; } .conversation-phone-field{ display:grid!important; gap:.45rem!important; margin-top:1rem!important; color:#f1d8ca!important; } .conversation-phone-field input{ width:100%!important; min-height:54px!important; padding:.85rem 1rem!important; border:1px solid rgba(226,133,87,.44)!important; border-radius:12px!important; color:#22140f!important; background:#fff7ef!important; } .conversation-notify-choice{ display:flex!important; align-items:center!important; gap:.65rem!important; margin:1rem 0!important; color:#edd8cd!important; } .conversation-review-tools{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:.75rem!important; margin-top:.85rem!important; } .conversation-review-tools .btn, .conversation-internal-send{ min-height:56px!important; border-radius:12px!important; } .conversation-internal-send{ width:100%!important; margin-top:.8rem!important; border:0!important; color:#fff!important; background:linear-gradient(135deg,var(--az7-terracotta),var(--az7-copper-2))!important; } .conversation-delivery-note{ margin:.8rem 0 0!important; color:#ccb5a8!important; } .conversation-send-result{ margin-top:1rem!important; padding:1rem!important; border:1px solid rgba(101,207,143,.38)!important; border-radius:12px!important; color:#e8fff1!important; background:rgba(43,126,79,.22)!important; } /* Tablet ------------------------------------------------------------------ */ @media (min-width:701px) and (max-width:1100px){ .conversation-shell{ grid-template-columns:minmax(250px,34%) minmax(0,66%)!important; padding:1.25rem!important; gap:.65rem 1.35rem!important; } .conversation-title-row h2{ font-size:clamp(2.2rem,4.7vw,3.6rem)!important; } } /* Mobile portrait --------------------------------------------------------- */ @media (max-width:700px){ .contact-grid{ width:min(calc(100% - 1rem),100%)!important; gap:1rem!important; } .gateway-stage{ flex-direction:column!important; min-height:0!important; } .gateway-avatar{ order:1!important; width:100%!important; } .gateway-avatar img{ min-height:0!important; height:100%!important; } .gateway-speech{ order:2!important; } .gateway-listen{ order:3!important; min-height:116px!important; padding:1rem!important; } .fingerprint-motion{ width:66px!important; height:66px!important; flex-basis:66px!important; } .contact-card{ padding:1rem!important; border-radius:12px!important; } .contact-card .form-grid{ grid-template-columns:1fr!important; } .contact-card .field, .contact-card .field.full{ grid-column:1!important; } .conversation-dialog, .conversation-dialog[open]{ width:100%!important; height:100dvh!important; } .conversation-shell{ display:flex!important; flex-direction:column!important; width:100%!important; height:100dvh!important; max-height:100dvh!important; overflow-y:auto!important; overscroll-behavior:contain; background: radial-gradient(circle at 50% 10%,rgba(196,80,43,.22),transparent 24%), linear-gradient(180deg,#120906 0%,#24130e 58%,#120906 100%)!important; } .conversation-shell::before{ opacity:.13!important; background:radial-gradient(circle at 50% 16%,transparent 0 23%,rgba(224,127,79,.12) 23.4% 23.8%,transparent 24.2%)!important; } .conversation-header{ order:1!important; flex:0 0 clamp(190px,57vw,250px)!important; width:100%!important; overflow:hidden!important; } .conversation-header .conversation-identity, .conversation-header .avatar-disc.avatar-portrait{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; } .conversation-header .conversation-avatar-image{ width:100%!important; height:100%!important; max-height:none!important; object-fit:cover!important; object-position:50% 12%!important; } .avatar-copy span, .avatar-copy small{ display:none!important; } .conversation-close{ position:fixed!important; width:44px!important; height:44px!important; inset-block-start:max(.65rem,env(safe-area-inset-top))!important; inset-inline-end:max(.65rem,env(safe-area-inset-right))!important; } .conversation-title-row{ order:2!important; flex:0 0 auto!important; width:100%!important; padding:.05rem .2rem!important; } .conversation-title-row h2{ max-width:none!important; text-align:start!important; } .conversation-lede{ order:3!important; flex:0 0 auto!important; width:100%!important; margin:0!important; padding:0 .2rem!important; } .conversation-log{ order:4!important; flex:0 0 auto!important; width:100%!important; border-radius:12px!important; overflow:auto!important; } .conversation-start-gate{ order:4!important; flex:0 0 auto!important; width:100%!important; } .conversation-state{ order:5!important; flex:0 0 auto!important; width:100%!important; } .voice-orb{ order:6!important; flex:0 0 74px!important; align-self:center!important; } .conversation-compose{ order:7!important; flex:0 0 auto!important; width:100%!important; display:grid!important; grid-template-columns:1fr!important; gap:.65rem!important; padding:.65rem!important; border-radius:12px!important; } .conversation-compose textarea{ resize:none!important; font-size:16px!important; } .conversation-resume-actions{ order:8!important; flex:0 0 auto!important; width:100%!important; grid-template-columns:1fr!important; } .conversation-resume-actions .btn{ min-height:62px!important; } .conversation-privacy{ order:9!important; flex:0 0 auto!important; width:100%!important; padding:.2rem .3rem!important; font-size:.85rem!important; } .conversation-shell.stage-geo .conversation-header, .conversation-shell.stage-review .conversation-header{ flex-basis:112px!important; height:112px!important; min-height:112px!important; border-radius:12px!important; } .conversation-shell.stage-geo .conversation-header .conversation-avatar-image, .conversation-shell.stage-review .conversation-header .conversation-avatar-image{ object-position:50% 15%!important; } .conversation-shell.stage-geo .conversation-title-row, .conversation-shell.stage-review .conversation-title-row{ order:2!important; } .conversation-shell.stage-geo .conversation-lede, .conversation-shell.stage-review .conversation-lede{ display:none!important; } .conversation-shell.stage-geo .conversation-geo-stage, .conversation-shell.stage-review .conversation-final-actions{ order:4!important; flex:1 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } .conversation-review{ min-height:150px!important; max-height:none!important; resize:none!important; font-size:16px!important; } .conversation-review-tools{ grid-template-columns:1fr!important; } .conversation-geo-choices{ grid-template-columns:1fr!important; } .conversation-geo-picker .geo-map{ min-height:260px!important; } .keyboard-open .conversation-header, .keyboard-open .conversation-title-row, .keyboard-open .conversation-lede{ display:none!important; } .keyboard-open .conversation-compose, .keyboard-open .conversation-final-actions{ scroll-margin-top:.4rem!important; } } /* Mobile landscape / short viewports ------------------------------------- */ @media (max-height:520px) and (orientation:landscape){ .conversation-shell{ display:grid!important; grid-template-columns:minmax(180px,34%) minmax(0,66%)!important; grid-template-rows:auto minmax(0,1fr) auto!important; gap:.45rem .8rem!important; padding:.55rem!important; overflow:hidden!important; } .conversation-header{ grid-column:1!important; grid-row:1/4!important; width:100%!important; height:100%!important; min-height:0!important; border-radius:44% 44% 18px 18px!important; } .conversation-title-row{ grid-column:2!important; grid-row:1!important; order:initial!important; } .conversation-title-row h2{ font-size:clamp(1.65rem,5vw,2.45rem)!important; } .conversation-lede{ display:none!important; } .conversation-log{ grid-column:2!important; grid-row:2!important; order:initial!important; min-height:0!important; max-height:none!important; } .conversation-state{ grid-column:2!important; grid-row:3!important; order:initial!important; } .voice-orb, .conversation-compose, .conversation-resume-actions, .conversation-privacy{ grid-column:2!important; } .conversation-compose{ position:absolute!important; inset:auto .55rem .55rem calc(34% + 1.35rem)!important; width:auto!important; max-height:calc(100% - 7rem)!important; overflow:auto!important; } .conversation-compose textarea{ min-height:72px!important; max-height:120px!important; } .conversation-primary-action{ min-height:50px!important; } .conversation-resume-actions{ position:absolute!important; inset:auto .55rem .55rem calc(34% + 1.35rem)!important; width:auto!important; grid-template-columns:1fr 1fr!important; } .conversation-privacy{ display:none!important; } .conversation-shell.stage-geo .conversation-header, .conversation-shell.stage-review .conversation-header{ display:block!important; height:100%!important; min-height:0!important; } .conversation-shell.stage-geo .conversation-geo-stage, .conversation-shell.stage-review .conversation-final-actions{ grid-column:2!important; grid-row:2/4!important; order:initial!important; height:100%!important; overflow:auto!important; } } /* TV and very large screens ---------------------------------------------- */ @media (min-width:1600px){ .gateway-avatar{ min-height:560px!important; } .gateway-avatar img{ min-height:560px!important; } .conversation-shell{ grid-template-columns:minmax(470px,40%) minmax(0,60%)!important; gap:1.05rem clamp(3rem,5vw,6rem)!important; padding:clamp(2rem,3.2vw,4.4rem)!important; } .conversation-title-row h2{ font-size:clamp(4rem,5vw,6.8rem)!important; } .conversation-lede{ font-size:1.25rem!important; } .conversation-log{ padding:1.35rem!important; } .conversation-message{ font-size:1.08rem!important; } .conversation-state{ min-height:58px!important; font-size:1.05rem!important; } .conversation-compose textarea{ min-height:120px!important; font-size:1.05rem!important; } .conversation-primary-action, .conversation-resume-actions .btn{ min-height:68px!important; font-size:1.05rem!important; } } /* RTL --------------------------------------------------------------------- */ html[dir="rtl"] .gateway-speech::before{ inset-inline-start:auto; inset-inline-end:-11px; transform:rotate(225deg); } html[dir="rtl"] .conversation-message.assistant{ margin-inline-start:auto!important; margin-inline-end:0!important; } html[dir="rtl"] .conversation-message.user{ margin-inline-start:0!important; margin-inline-end:auto!important; } /* Accessibility and motion ----------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .gateway-listen, .conversation-primary-action, .conversation-close, .voice-orb{ transition:none!important; animation:none!important; } } @media (forced-colors:active){ .conversation-gateway, .contact-card, .conversation-shell, .conversation-header, .conversation-log, .conversation-compose{ border:1px solid CanvasText!important; } } /* ========================================================================== V7.0.2 — THEMEOK ONE-SCREEN LOCK Compact gateway: one complete visual scene below the fixed header. ========================================================================== */ .conversation-gateway{ height:clamp(560px,calc(100svh - var(--header) - 1.5rem),720px)!important; max-height:720px!important; } .gateway-copy .eyebrow{ margin:0 0 .35rem!important; font-size:.72rem!important; } .gateway-copy h2{ line-height:.96!important; } .gateway-copy .power-bridge-copy{ margin:.55rem 0 0!important; line-height:1.45!important; } .gateway-stage{ grid-column:1/-1!important; grid-row:2!important; grid-template-columns:minmax(310px,40%) minmax(0,60%)!important; grid-template-rows:auto minmax(0,1fr)!important; gap:.7rem clamp(1.25rem,2.5vw,3rem)!important; min-height:0!important; } .gateway-avatar{ min-height:0!important; height:100%!important; border-radius:48% 48% 22px 22px!important; } .gateway-avatar::before{ inset:10px!important; border-radius:48% 48% 16px 16px!important; } .gateway-avatar img{ min-height:0!important; object-position:50% 12%!important; mask-image:linear-gradient(#000 0 91%,rgba(0,0,0,.82) 96%,transparent 100%)!important; } .gateway-speech{ grid-column:2!important; grid-row:1!important; min-height:88px!important; display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:center!important; gap:.85rem!important; padding:.8rem 1rem!important; } .gateway-speech::before{ top:32px!important; } .gateway-voice-trigger{ width:62px!important; height:62px!important; display:grid!important; place-items:center!important; flex:0 0 62px!important; padding:0!important; border:0!important; border-radius:50%!important; color:inherit!important; background:transparent!important; cursor:pointer!important; } .gateway-voice-trigger:focus-visible, .gateway-message-trigger:focus-visible, .gateway-project-chip:focus-visible{ outline:3px solid rgba(255,244,232,.92)!important; outline-offset:3px!important; } .gateway-speech .fingerprint-motion{ width:56px!important; height:56px!important; flex-basis:56px!important; box-shadow:0 0 0 6px rgba(207,85,54,.08),0 0 24px rgba(213,92,55,.28)!important; } .gateway-speech-copy{ display:grid!important; gap:.18rem!important; min-width:0!important; } .gateway-speech-copy span{ margin:0!important; color:var(--az7-terracotta)!important; font-weight:900!important; letter-spacing:.08em!important; } .gateway-speech-copy strong{ color:var(--az7-cream)!important; font-size:clamp(.95rem,1.1vw,1.08rem)!important; line-height:1.45!important; } .gateway-quickstart{ grid-column:2!important; grid-row:2!important; min-height:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; gap:.75rem!important; padding:.85rem!important; border:1px solid var(--az7-line)!important; border-radius:var(--az7-radius-lg)!important; background:linear-gradient(145deg,rgba(29,17,13,.9),rgba(53,29,21,.82))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 16px 42px rgba(0,0,0,.18)!important; } .gateway-message-trigger{ width:100%!important; min-height:66px!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:.9rem!important; padding:.75rem .8rem .75rem 1rem!important; border:1px solid rgba(225,126,82,.42)!important; border-radius:12px!important; color:#dbc8bc!important; background:rgba(18,11,8,.72)!important; text-align:start!important; cursor:pointer!important; } .gateway-send-icon{ width:48px!important; height:48px!important; display:grid!important; place-items:center!important; border-radius:50%!important; color:#fff!important; font-size:1.25rem!important; background:linear-gradient(135deg,var(--az7-terracotta),var(--az7-copper-2))!important; box-shadow:0 9px 24px rgba(133,42,30,.34)!important; } .gateway-project-chips{ flex-wrap:wrap!important; } .gateway-project-chip{ display:inline-flex!important; align-items:center!important; gap:.42rem!important; color:#f3dfd2!important; font:inherit!important; font-size:.83rem!important; cursor:pointer!important; } .gateway-project-chip:hover{ border-color:rgba(225,124,83,.74)!important; background:rgba(105,46,33,.48)!important; } .gateway-trust-strip{ grid-column:1/-1!important; grid-row:3!important; align-items:center!important; min-height:64px!important; border-top:1px solid rgba(224,132,86,.22)!important; } .gateway-trust-item{ min-width:0!important; display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:center!important; gap:.65rem!important; border-inline-end:1px solid rgba(224,132,86,.18)!important; } .gateway-trust-item:last-child{ border-inline-end:0!important; } .gateway-trust-icon{ width:34px!important; height:34px!important; display:grid!important; place-items:center!important; border:1px solid rgba(226,135,90,.48)!important; border-radius:50%!important; color:var(--az7-terracotta)!important; font-weight:900!important; } .gateway-trust-item > span:last-child{ min-width:0!important; display:grid!important; gap:.08rem!important; } .gateway-trust-item strong{ overflow:hidden!important; color:#f7e6dc!important; font-size:.82rem!important; line-height:1.15!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .gateway-trust-item small{ overflow:hidden!important; color:#bfa99d!important; font-size:.7rem!important; line-height:1.15!important; text-overflow:ellipsis!important; white-space:nowrap!important; } @media (min-width:701px) and (max-width:1100px){ .conversation-gateway{ height:clamp(560px,calc(100svh - var(--header) - 1rem),660px)!important; min-height:560px!important; grid-template-columns:minmax(250px,36%) minmax(0,64%)!important; } .gateway-stage{ grid-template-columns:minmax(250px,36%) minmax(0,64%)!important; } .gateway-copy h2{ font-size:clamp(2.25rem,5vw,3.4rem)!important; } .gateway-project-chip{ font-size:.76rem!important; padding:.42rem .58rem!important; } .gateway-trust-item{ padding-inline:.45rem!important; gap:.45rem!important; } .gateway-trust-item small{ display:none!important; } } @media (max-width:700px){ .contact{ padding-block:.55rem 1.5rem!important; } .conversation-gateway{ height:auto!important; min-height:0!important; max-height:none!important; display:flex!important; flex-direction:column!important; gap:.6rem!important; padding:.65rem!important; border-radius:12px!important; } .gateway-copy{ order:1!important; padding:.15rem .2rem!important; } .gateway-copy .eyebrow{ margin-bottom:.25rem!important; font-size:.65rem!important; } .gateway-copy h2{ max-width:15ch!important; font-size:clamp(1.75rem,9vw,2.3rem)!important; line-height:1!important; } .gateway-copy .power-bridge-copy{ margin-top:.4rem!important; font-size:.83rem!important; line-height:1.38!important; } .gateway-stage{ order:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:clamp(145px,38vw,185px) auto auto!important; gap:.55rem!important; } .gateway-avatar{ grid-column:1!important; grid-row:1!important; min-height:0!important; height:100%!important; border-radius:12px!important; } .gateway-avatar::before{ border-radius:12px!important; } .gateway-avatar img{ object-position:50% 17%!important; mask-image:linear-gradient(#000 0 88%,rgba(0,0,0,.84) 95%,transparent 100%)!important; } .gateway-speech{ grid-column:1!important; grid-row:2!important; min-height:72px!important; gap:.6rem!important; padding:.6rem .7rem!important; border-radius:12px!important; } .gateway-speech::before{ display:none!important; } .gateway-voice-trigger{ width:50px!important; height:50px!important; } .gateway-speech .fingerprint-motion{ width:46px!important; height:46px!important; flex-basis:46px!important; } .gateway-speech-copy strong{ font-size:.84rem!important; line-height:1.35!important; } .gateway-quickstart{ grid-column:1!important; grid-row:3!important; gap:.55rem!important; padding:.6rem!important; border-radius:12px!important; } .gateway-message-trigger{ min-height:56px!important; padding:.5rem .55rem .5rem .75rem!important; font-size:.82rem!important; } .gateway-send-icon{ width:42px!important; height:42px!important; } .gateway-project-chips{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:.45rem!important; } .gateway-project-chip{ min-width:0!important; justify-content:center!important; } .gateway-trust-strip{ order:3!important; grid-template-columns:1fr 1fr!important; min-height:0!important; gap:.35rem!important; padding:.45rem!important; border:1px solid rgba(224,132,86,.18)!important; border-radius:12px!important; } .gateway-trust-item{ min-height:40px!important; gap:.4rem!important; padding:.25rem!important; border-inline-end:0!important; } .gateway-trust-icon{ width:28px!important; height:28px!important; font-size:.75rem!important; } .gateway-trust-item strong{ font-size:.7rem!important; } .gateway-trust-item small{ display:none!important; } } @media (max-width:700px) and (max-height:700px){ .gateway-copy .power-bridge-copy{ display:none!important; } .gateway-stage{ grid-template-rows:128px auto auto!important; } .gateway-project-chip{ min-height:34px!important; } .gateway-trust-strip{ display:none!important; } } @media (min-width:1600px){ .conversation-gateway{ height:clamp(680px,calc(100svh - var(--header) - 2rem),900px)!important; min-height:680px!important; max-height:900px!important; grid-template-columns:minmax(430px,40%) minmax(0,60%)!important; } .gateway-stage{ grid-template-columns:minmax(430px,40%) minmax(0,60%)!important; } .gateway-speech{ min-height:104px!important; } .gateway-quickstart{ padding:1rem!important; } .gateway-trust-strip{ min-height:76px!important; } .gateway-trust-item strong{ font-size:.95rem!important; } .gateway-trust-item small{ font-size:.78rem!important; } } html[dir="rtl"] .gateway-message-trigger{ padding:.75rem 1rem .75rem .8rem!important; } /* V7.0.2 layout correction — avatar spans the full compact scene */ @media (min-width:701px){ .gateway-copy{ grid-column:2!important; } .gateway-stage{ grid-column:1/-1!important; grid-row:1!important; align-self:stretch!important; height:100%!important; max-height:100%!important; overflow:hidden!important; grid-template-rows:clamp(132px,19vh,166px) auto minmax(0,1fr)!important; } } @media (max-width:700px) and (max-height:760px){ .gateway-trust-strip{ display:none!important; } } /* Compact fingerprint stays inside its trigger */ .gateway-speech .fingerprint-motion{ overflow:hidden!important; } .gateway-speech .fingerprint-motion i{ border-width:2px!important; } .gateway-speech .fingerprint-motion i:nth-child(1){width:42px!important;height:50px!important;} .gateway-speech .fingerprint-motion i:nth-child(2){width:32px!important;height:40px!important;} .gateway-speech .fingerprint-motion i:nth-child(3){width:22px!important;height:30px!important;} .gateway-speech .fingerprint-motion i:nth-child(4){width:12px!important;height:20px!important;} /* ======================================================================== V7.0.2 — GEMINI DARIJA VOICE & RTL RECOVERY LOCK ======================================================================== */ html[dir="rtl"] .conversation-shell, html[dir="rtl"] .conversation-shell textarea, html[dir="rtl"] .conversation-shell input, html[dir="rtl"] .gateway-copy, html[dir="rtl"] .gateway-speech, html[dir="rtl"] .gateway-quickstart{ direction:rtl!important; text-align:right!important; } html[dir="rtl"] .conversation-title-row h2, html[dir="rtl"] .conversation-lede{ max-width:none!important; text-align:right!important; letter-spacing:0!important; text-wrap:pretty!important; } html[dir="rtl"] .conversation-log{ direction:rtl!important; text-align:right!important; isolation:isolate!important; } html[dir="rtl"] .conversation-message{ width:fit-content!important; max-width:92%!important; overflow-wrap:anywhere!important; unicode-bidi:plaintext!important; } html[dir="rtl"] .conversation-compose{ grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important; } html[dir="rtl"] .conversation-compose textarea{ grid-column:2!important; unicode-bidi:plaintext!important; } html[dir="rtl"] .conversation-primary-action{ grid-column:1!important; } html[dir="rtl"] .conversation-state{ justify-content:flex-start!important; unicode-bidi:plaintext!important; } html[dir="rtl"] .avatar-copy{ text-align:right!important; } html[dir="rtl"] .gateway-project-chips{ justify-content:flex-start!important; } @media (min-width:701px){ .conversation-shell{ grid-template-rows:auto auto minmax(96px,1fr) 46px 70px auto auto auto!important; gap:.48rem clamp(1.1rem,2.1vw,2.5rem)!important; padding:clamp(.75rem,1.55vw,1.45rem)!important; } .conversation-title-row h2{ font-size:clamp(2.15rem,4.05vw,4.25rem)!important; line-height:1.02!important; } html[dir="rtl"] .conversation-title-row h2{ font-size:clamp(2.25rem,3.8vw,4rem)!important; line-height:1.08!important; } .conversation-lede{ font-size:clamp(.88rem,1.05vw,1.05rem)!important; line-height:1.45!important; } .conversation-log{ min-height:96px!important; max-height:24dvh!important; padding:.72rem!important; } .conversation-message{ margin:.3rem 0!important; padding:.72rem .88rem!important; line-height:1.45!important; } .conversation-state{ min-height:46px!important; padding:.55rem .8rem!important; } .voice-orb{ width:68px!important; height:68px!important; } .conversation-compose{ padding:.58rem!important; gap:.58rem!important; } .conversation-compose textarea{ min-height:76px!important; max-height:126px!important; padding:.78rem!important; } .conversation-resume-actions .btn{ min-height:52px!important; } html[dir="rtl"] .gateway-copy h2{ letter-spacing:0!important; } html[dir="rtl"] .gateway-copy .power-bridge-copy{ max-width:54ch!important; font-size:clamp(.88rem,1.1vw,1.05rem)!important; line-height:1.55!important; } html[dir="rtl"] .gateway-stage{ grid-template-rows:clamp(150px,21vh,188px) auto minmax(0,1fr)!important; } } @media (max-width:700px){ .conversation-shell{ gap:.5rem!important; padding:max(.5rem,env(safe-area-inset-top)) .5rem max(.65rem,env(safe-area-inset-bottom))!important; } .conversation-header{ flex-basis:clamp(138px,42vw,180px)!important; height:clamp(138px,42vw,180px)!important; min-height:138px!important; border-radius:12px!important; } .conversation-header::after{border-radius:12px!important;inset:8px!important;} .conversation-avatar-image{object-position:50% 17%!important;} .avatar-copy{ inset:auto .65rem .65rem!important; padding:.58rem .68rem!important; border-radius:12px!important; } .avatar-copy strong{font-size:.92rem!important;} .avatar-copy span{font-size:.78rem!important;} .avatar-copy small{font-size:.68rem!important;} .conversation-title-row h2{ font-size:clamp(1.65rem,8.2vw,2.25rem)!important; line-height:1.08!important; } html[dir="rtl"] .conversation-title-row h2{ font-size:clamp(1.75rem,8vw,2.3rem)!important; } .conversation-lede{ font-size:.82rem!important; line-height:1.42!important; } .conversation-log{ min-height:88px!important; max-height:22dvh!important; padding:.58rem!important; } .conversation-message{ max-width:96%!important; padding:.62rem .7rem!important; margin:.25rem 0!important; font-size:.9rem!important; } .conversation-state{ min-height:42px!important; padding:.5rem .68rem!important; font-size:.84rem!important; } .voice-orb{ flex-basis:58px!important; width:58px!important; height:58px!important; } .conversation-compose textarea{ min-height:82px!important; max-height:24dvh!important; } .conversation-primary-action{min-height:54px!important;} html[dir="rtl"] .conversation-compose{ grid-template-columns:1fr!important; } html[dir="rtl"] .conversation-compose textarea, html[dir="rtl"] .conversation-primary-action{ grid-column:1!important; } html[dir="rtl"] .gateway-copy h2{ max-width:13ch!important; font-size:clamp(1.8rem,9vw,2.35rem)!important; line-height:1.12!important; letter-spacing:0!important; } html[dir="rtl"] .gateway-copy .power-bridge-copy{ font-size:.82rem!important; line-height:1.45!important; } } @media (max-height:520px) and (orientation:landscape){ html[dir="rtl"] .conversation-shell{ grid-template-columns:minmax(0,66%) minmax(180px,34%)!important; } html[dir="rtl"] .conversation-header{grid-column:2!important;} html[dir="rtl"] .conversation-title-row, html[dir="rtl"] .conversation-log, html[dir="rtl"] .conversation-state, html[dir="rtl"] .conversation-compose, html[dir="rtl"] .conversation-resume-actions{grid-column:1!important;} html[dir="rtl"] .conversation-compose, html[dir="rtl"] .conversation-resume-actions{ inset:auto calc(34% + 1.35rem) .55rem .55rem!important; } } /* ======================================================================== V7.1.1 — FINAL VOICE UI PIXEL LOCK Desktop/TV: clean two-column scene, assistant card over the lower portrait, one-line title, larger touch-first project editor. Mobile flow preserved. ======================================================================== */ .gateway-message-editor{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:.65rem; width:100%; min-width:0; } .gateway-message-editor textarea{ width:100%; min-width:0; min-height:118px; max-height:230px; margin:0; padding:1rem 1.1rem; border:1px solid rgba(225,126,82,.42); border-radius:12px; outline:none; resize:none; overflow-y:auto; color:var(--az7-cream); background:rgba(18,11,8,.76); font:inherit; font-size:clamp(.92rem,1.05vw,1.05rem); line-height:1.55; caret-color:var(--az7-terracotta); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; } .gateway-message-editor textarea::placeholder{color:#c5b0a4;opacity:.9;} .gateway-message-editor textarea:focus{ border-color:rgba(230,132,90,.88); background:rgba(24,14,11,.9); box-shadow:0 0 0 4px rgba(207,85,54,.13),inset 0 1px 0 rgba(255,255,255,.04); } .gateway-message-editor .gateway-message-trigger{ width:58px!important; min-width:58px!important; min-height:100%!important; display:grid!important; place-items:center!important; padding:.45rem!important; border:0!important; border-radius:12px!important; background:linear-gradient(155deg,rgba(205,76,62,.98),rgba(163,49,42,.98))!important; box-shadow:0 12px 30px rgba(112,28,25,.34),inset 0 1px rgba(255,255,255,.18)!important; } .gateway-message-editor .gateway-send-icon{ width:46px!important;height:46px!important; box-shadow:none!important;background:transparent!important; } @media (min-width:701px){ .conversation-gateway{ display:grid!important; grid-template-columns:minmax(320px,40%) minmax(0,60%)!important; grid-template-rows:auto minmax(0,1fr) auto!important; column-gap:clamp(1.35rem,2.6vw,3.25rem)!important; row-gap:.7rem!important; } .gateway-stage{display:contents!important;} html[dir="ltr"] .gateway-copy, html[dir="ltr"] .gateway-quickstart{grid-column:2!important;} html[dir="ltr"] .gateway-avatar, html[dir="ltr"] .gateway-speech{grid-column:1!important;} html[dir="rtl"] .gateway-copy, html[dir="rtl"] .gateway-quickstart{grid-column:2!important;} html[dir="rtl"] .gateway-avatar, html[dir="rtl"] .gateway-speech{grid-column:1!important;} .gateway-copy{ grid-row:1!important; align-self:end!important; z-index:5!important; padding:.1rem 0 0!important; } .gateway-copy .eyebrow{margin:0 0 .3rem!important;} .gateway-copy h2{ max-width:none!important; margin:.2rem 0 .45rem!important; font-size:clamp(2.2rem,3.35vw,4.25rem)!important; line-height:1!important; letter-spacing:-.035em!important; white-space:nowrap!important; text-wrap:nowrap!important; } html[lang="en"] .gateway-copy h2{font-size:clamp(2rem,3.05vw,3.9rem)!important;} html[dir="rtl"] .gateway-copy h2{ max-width:none!important; font-size:clamp(2.15rem,3.2vw,4rem)!important; line-height:1.08!important; white-space:nowrap!important; } .gateway-copy .power-bridge-copy{ max-width:68ch!important; margin:.25rem 0 0!important; font-size:clamp(.9rem,1.02vw,1.04rem)!important; line-height:1.45!important; } .gateway-avatar{ grid-row:1/3!important; align-self:stretch!important; justify-self:stretch!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; z-index:1!important; } .gateway-avatar img{object-position:50% 16%!important;} .gateway-speech{ grid-row:1/3!important; align-self:end!important; justify-self:center!important; width:min(calc(100% - 2rem),430px)!important; min-height:82px!important; margin:0 1rem 1rem!important; padding:.72rem .85rem!important; z-index:7!important; border-radius:12px!important; background:linear-gradient(145deg,rgba(38,19,15,.94),rgba(62,30,23,.92))!important; box-shadow:0 18px 42px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04)!important; backdrop-filter:blur(16px) saturate(1.1)!important; } .gateway-speech::before{display:none!important;} .gateway-speech .gateway-voice-trigger{width:54px!important;height:54px!important;min-width:54px!important;} .gateway-speech .fingerprint-motion{width:48px!important;height:48px!important;flex-basis:48px!important;} .gateway-speech-copy strong{font-size:clamp(.88rem,.96vw,1rem)!important;line-height:1.4!important;} .gateway-quickstart{ grid-row:2!important; align-self:stretch!important; min-height:0!important; padding:clamp(.8rem,1.15vw,1.05rem)!important; gap:.7rem!important; } .gateway-project-chips{margin-top:.05rem!important;} .gateway-trust-strip{grid-column:1/-1!important;grid-row:3!important;} } @media (min-width:1600px){ .gateway-copy h2{font-size:clamp(3.4rem,3.65vw,5rem)!important;} html[lang="en"] .gateway-copy h2{font-size:clamp(3rem,3.25vw,4.55rem)!important;} html[dir="rtl"] .gateway-copy h2{font-size:clamp(3.1rem,3.4vw,4.7rem)!important;} .gateway-message-editor textarea{min-height:clamp(150px,18vh,210px)!important;font-size:1.08rem!important;} .gateway-speech{width:min(calc(100% - 2.5rem),500px)!important;margin-bottom:1.25rem!important;} } @media (min-width:701px) and (max-width:1180px){ .conversation-gateway{grid-template-columns:minmax(260px,36%) minmax(0,64%)!important;} .gateway-copy h2{font-size:clamp(2rem,4vw,3.15rem)!important;white-space:normal!important;text-wrap:balance!important;} html[lang="en"] .gateway-copy h2{font-size:clamp(1.9rem,3.65vw,2.9rem)!important;} html[dir="rtl"] .gateway-copy h2{font-size:clamp(2rem,3.8vw,3rem)!important;white-space:normal!important;} .gateway-message-editor textarea{min-height:112px!important;max-height:170px!important;} .gateway-speech{width:calc(100% - 1rem)!important;margin:.5rem!important;} } @media (max-width:700px){ .gateway-message-editor{grid-template-columns:minmax(0,1fr) 50px!important;gap:.45rem!important;} .gateway-message-editor textarea{ min-height:76px!important; max-height:150px!important; padding:.72rem .78rem!important; border-radius:12px!important; font-size:.84rem!important; line-height:1.42!important; } .gateway-message-editor .gateway-message-trigger{width:50px!important;min-width:50px!important;border-radius:12px!important;} .gateway-message-editor .gateway-send-icon{width:38px!important;height:38px!important;font-size:1rem!important;} } html[dir="rtl"] .gateway-message-editor textarea{ direction:rtl!important; text-align:right!important; unicode-bidi:plaintext!important; } html[dir="rtl"] .gateway-message-editor .gateway-send-icon{transform:scaleX(-1);} /* V7.1.1 cognitive editor expansion — use the complete available panel height. */ @media (min-width:701px){ .gateway-quickstart{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; align-content:stretch!important; justify-content:stretch!important; } .gateway-message-editor{height:100%!important;min-height:0!important;} .gateway-message-editor textarea{ height:100%!important; min-height:100%!important; max-height:none!important; } } /* ==========================================================================\n KechElec v1.4.1 — Electric Pantone premium override\n ========================================================================== */ :root{ --az7-ink:#24252F; --az7-ink-soft:#30313D; --az7-panel:#3B3B4B; --az7-panel-soft:#4A4B5A; --az7-copper:#FF6B00; --az7-copper-2:#B84400; --az7-terracotta:#FF6B00; --az7-cream:#F8F5E7; --az7-cream-soft:#AECCD8; --az7-line:rgba(174,204,216,.42); --az7-line-soft:rgba(234,219,156,.14); --az7-shadow:0 28px 90px rgba(18,19,28,.38); } .contact{background:radial-gradient(circle at 15% 18%,rgba(234,219,156,.38),transparent 27%),radial-gradient(circle at 84% 72%,rgba(174,204,216,.44),transparent 31%),#F8F5E7!important;} .conversation-gateway,.conversation-shell{background:radial-gradient(circle at 18% 44%,rgba(255,107,0,.20),transparent 28%),radial-gradient(circle at 82% 18%,rgba(174,204,216,.12),transparent 24%),linear-gradient(112deg,#1C1D26 0%,#3B3B4B 58%,#242530 100%)!important;} .gateway-avatar,.conversation-header{background:#252631!important;border-color:rgba(174,204,216,.38)!important;} .gateway-speech{background:linear-gradient(135deg,rgba(74,75,90,.9),rgba(43,44,56,.96))!important;} .gateway-speech::before{background:#3B3B4B!important;} .gateway-listen,.conversation-log,.conversation-compose{background:rgba(31,32,42,.82)!important;} .fingerprint-motion,.voice-orb{background:radial-gradient(circle,#FF6B00 0 30%,#B84400 31% 53%,#242530 54%)!important;border-color:rgba(255,107,0,.72)!important;box-shadow:0 0 0 8px rgba(255,107,0,.09),0 0 34px rgba(255,107,0,.25)!important;} .gateway-avatar-glow{background:rgba(255,107,0,.18)!important;} .contact-card{background:radial-gradient(circle at 88% 12%,rgba(174,204,216,.13),transparent 25%),linear-gradient(145deg,#242530,#3B3B4B)!important;} .contact-card label{color:#F8F5E7!important;} .contact-card input,.contact-card select,.contact-card textarea{color:#fff!important;background:rgba(255,255,255,.065)!important;border-color:rgba(174,204,216,.42)!important;} .contact-card input:focus,.contact-card select:focus,.contact-card textarea:focus{border-color:#FF6B00!important;box-shadow:0 0 0 4px rgba(255,107,0,.14)!important;} .contact-card .btn-primary{color:#fff!important;background:#3B3B4B!important;border:1px solid #FF6B00!important;box-shadow:inset 0 -3px 0 #FF6B00,0 14px 34px rgba(21,22,30,.28)!important;} .conversation-message.assistant{color:#292A34!important;border-color:#AECCD8!important;background:linear-gradient(135deg,#F8F5E7,#EEF4F6)!important;} .conversation-message.user{color:#fff!important;border-color:rgba(255,107,0,.56)!important;background:linear-gradient(135deg,#4A4B5A,#30313D)!important;} .conversation-start-gate{background:#3B3B4B!important;border-color:#FF6B00!important;box-shadow:inset 0 -3px 0 #FF6B00!important;} .conversation-state{color:#DDE8EB!important;background:rgba(43,44,56,.94)!important;} .conversation-state-dot{background:#FF6B00!important;box-shadow:0 0 0 6px rgba(255,107,0,.10)!important;} .gateway-copy .eyebrow,.gateway-speech span{color:#FF8A33!important;} /* KechElec v1.4.1 — Pantone reference tokens */ :root{--kech-1505:#FF6B00;--kech-4132:#3B3B4B;--kech-4001:#EADB9C;--kech-2204:#AECCD8;} /* ===== glass primitives absorbed ===== */ /** * KechElec v1.4.1 — Electric Glass Polish * Shared visual finish for Public / Client / Pro / Owner Control Center. * Progressive enhancement: solid/translucent fallback remains usable without backdrop-filter. */ :root{ --kech-glass-blur:18px; --kech-glass-blur-soft:10px; --kech-glass-sat:1.22; --kech-glass-radius:12px; --kech-glass-radius-sm:10px; --kech-glass-light:rgba(255,255,255,.66); --kech-glass-light-strong:rgba(248,245,231,.82); --kech-glass-dark:rgba(43,44,56,.72); --kech-glass-dark-strong:rgba(28,29,38,.88); --kech-glass-line-light:rgba(59,59,75,.16); --kech-glass-line-dark:rgba(174,204,216,.28); --kech-glass-highlight:rgba(255,255,255,.24); --kech-glass-shadow-light:0 18px 55px rgba(42,43,55,.12); --kech-glass-shadow-dark:0 22px 70px rgba(8,9,14,.34); --kech-glow-orange:0 0 0 1px rgba(255,107,0,.18),0 18px 48px rgba(255,107,0,.10); } /* ---------- Public / light surface ---------- */ html body[data-theme-version] .header.scrolled{ background:rgba(37,38,49,.76)!important; border-bottom:1px solid rgba(174,204,216,.24)!important; box-shadow:0 14px 42px rgba(20,21,29,.18)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body[data-theme-version] .langs a, html body[data-theme-version] .method-card, html body[data-theme-version] .service, html body[data-theme-version] .testimonial, html body[data-theme-version] .contact-card{ border-color:var(--kech-glass-line-light)!important; box-shadow:var(--kech-glass-shadow-light)!important; } html body[data-theme-version] .method-card, html body[data-theme-version] .service{ background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(238,244,246,.58))!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur-soft)) saturate(1.12); backdrop-filter:blur(var(--kech-glass-blur-soft)) saturate(1.12); } html body[data-theme-version] .contact-card{ background: linear-gradient(145deg,rgba(43,44,56,.78),rgba(59,59,75,.66))!important; border-color:var(--kech-glass-line-dark)!important; box-shadow:var(--kech-glass-shadow-dark),inset 0 1px 0 rgba(255,255,255,.08)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body[data-theme-version] .gateway-quickstart, html body[data-theme-version] .gateway-speech, html body[data-theme-version] .gateway-trust-item, html body[data-theme-version] .conversation-log, html body[data-theme-version] .conversation-compose, html body[data-theme-version] .conversation-state, html body[data-theme-version] .conversation-geo-stage, html body[data-theme-version] .conversation-final-actions{ background:linear-gradient(145deg,rgba(59,59,75,.70),rgba(28,29,38,.74))!important; border:1px solid var(--kech-glass-line-dark)!important; box-shadow:var(--kech-glass-shadow-dark),inset 0 1px 0 rgba(255,255,255,.07)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body[data-theme-version] .gateway-project-chip, html body[data-theme-version] .geo-choice, html body[data-theme-version] .conversation-resume-actions .btn{ background:rgba(255,255,255,.075)!important; border-color:rgba(174,204,216,.30)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur-soft)); backdrop-filter:blur(var(--kech-glass-blur-soft)); } html body[data-theme-version] .btn-primary, html body[data-theme-version] .conversation-primary-action, html body[data-theme-version] .conversation-internal-send{ border-color:rgba(255,107,0,.76)!important; box-shadow:inset 0 -3px 0 var(--kech-1505),0 12px 34px rgba(28,29,38,.20)!important; } /* ---------- Client PWA ---------- */ html body .topbar, html body .auth-card, html body .app-grid, html body .section-head, html body .thread-head, html body .composer, html body .quick-actions{ border-color:var(--kech-glass-line-dark)!important; box-shadow:var(--kech-glass-shadow-dark)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body .topbar{background:rgba(28,29,38,.78)!important;box-shadow:0 12px 34px rgba(8,9,14,.20)!important;} html body .auth-card, html body .app-grid{background:linear-gradient(145deg,rgba(59,59,75,.66),rgba(28,29,38,.76))!important;} html body .thread-head, html body .composer, html body .quick-actions{background:rgba(43,44,56,.72)!important;} html body .conversation{ background:linear-gradient(145deg,rgba(59,59,75,.68),rgba(43,44,56,.70))!important; border-color:rgba(174,204,216,.22)!important; box-shadow:0 9px 28px rgba(9,10,15,.15),inset 0 1px 0 rgba(255,255,255,.045)!important; } html body .conversation:hover{border-color:rgba(255,107,0,.52)!important;transform:translateY(-1px);} html body .conversation.active{border-color:var(--kech-1505)!important;box-shadow:var(--kech-glow-orange)!important;} /* ---------- Pro / artisan PWA ---------- */ html body .workspace, html body .sidebar, html body .searchbar, html body .thread-head, html body .cognitive-panel, html body .send-preview, html body .composer{ border-color:var(--kech-glass-line-dark)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body .workspace{background:rgba(28,29,38,.42)!important;box-shadow:var(--kech-glass-shadow-dark)!important;} html body .sidebar{background:rgba(36,37,48,.66)!important;} html body .searchbar, html body .thread-head, html body .composer{background:rgba(36,37,48,.78)!important;} html body .cognitive-panel, html body .send-preview{background:linear-gradient(160deg,rgba(59,59,75,.70),rgba(43,44,56,.70))!important;box-shadow:var(--kech-glass-shadow-dark),inset 0 1px 0 rgba(255,255,255,.055)!important;} html body .suggested-action{background:rgba(28,29,38,.58)!important;border-color:rgba(174,204,216,.20)!important;} html body .suggested-action.primary{border-color:var(--kech-1505)!important;box-shadow:var(--kech-glow-orange)!important;} /* ---------- Owner Control Center ---------- */ html body .admin-header, html body .hero, html body .card, html body .owner-card, html body .section-card, html body .panel, html body .keycard, html body .key-card, html body .provider, html body .autoqual, html body .advanced, html body .filters, html body .livepanel{ background:linear-gradient(150deg,rgba(59,59,75,.70),rgba(43,44,56,.74))!important; border-color:var(--kech-glass-line-dark)!important; box-shadow:var(--kech-glass-shadow-dark),inset 0 1px 0 rgba(255,255,255,.055)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); backdrop-filter:blur(var(--kech-glass-blur)) saturate(var(--kech-glass-sat)); } html body .stat, html body .pipe, html body .check, html body .policybox, html body .phasebar, html body .key, html body .event, html body .empty, html body .routepack{ background:rgba(36,37,48,.64)!important; border-color:rgba(174,204,216,.20)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important; -webkit-backdrop-filter:blur(var(--kech-glass-blur-soft)); backdrop-filter:blur(var(--kech-glass-blur-soft)); } html body .admin-nav__link, html body .btn, html body button, html body .file-button{ transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease!important; } html body .admin-nav__link:hover, html body .btn:hover, html body button:not(.ke-edge-cue):hover, html body .file-button:hover{transform:translateY(-1px);} html body .admin-nav__link.is-active, html body .btn.primary, html body button:not(.secondary):not(.ke-edge-cue){box-shadow:var(--kech-glow-orange)!important;} /* ---------- Form polish ---------- */ html body input, html body textarea, html body select{ box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important; } html body input:focus, html body textarea:focus, html body select:focus{ border-color:var(--kech-1505)!important; box-shadow:0 0 0 4px rgba(255,107,0,.13),inset 0 1px 0 rgba(255,255,255,.04)!important; outline:none!important; } html body :focus-visible{outline:3px solid var(--kech-1505)!important;outline-offset:3px!important;} /* Primary orange controls use the darker digital derivative for AA text contrast; PANTONE 1505 C remains the energy border/glow/focus colour. */ html body[data-theme-version] .conversation-primary-action, html body[data-theme-version] .conversation-internal-send{ background:linear-gradient(135deg,#B84400,#8F3300)!important; color:#fff!important; border:1px solid rgba(255,107,0,.82)!important; } /* ---------- Performance / accessibility fallbacks ---------- */ @media (max-width:700px){ :root{--kech-glass-blur:12px;--kech-glass-blur-soft:7px;--kech-glass-shadow-dark:0 14px 38px rgba(8,9,14,.26);--kech-glass-shadow-light:0 12px 34px rgba(42,43,55,.10);} } @media (prefers-reduced-motion:reduce){ html body .conversation:hover, html body .admin-nav__link:hover, html body .btn:hover, html body button:hover, html body .file-button:hover{transform:none!important;} } @media (prefers-reduced-transparency:reduce){ html body[data-theme-version] .header.scrolled, html body[data-theme-version] .method-card, html body[data-theme-version] .service, html body[data-theme-version] .contact-card, html body .topbar, html body .auth-card, html body .app-grid, html body .workspace, html body .sidebar, html body .searchbar, html body .thread-head, html body .composer, html body .cognitive-panel, html body .admin-header, html body .hero, html body .card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} html body[data-theme-version] .method-card, html body[data-theme-version] .service{background:#F8F5E7!important;} html body[data-theme-version] .contact-card, html body .topbar, html body .auth-card, html body .app-grid, html body .workspace, html body .sidebar, html body .searchbar, html body .thread-head, html body .composer, html body .cognitive-panel, html body .admin-header, html body .hero, html body .card{background:#30313D!important;} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html body[data-theme-version] .method-card, html body[data-theme-version] .service{background:rgba(248,245,231,.96)!important;} html body[data-theme-version] .contact-card, html body .topbar, html body .auth-card, html body .app-grid, html body .workspace, html body .sidebar, html body .searchbar, html body .thread-head, html body .composer, html body .cognitive-panel, html body .admin-header, html body .hero, html body .card{background:rgba(48,49,61,.97)!important;} } /* Avant/Après: fond continu + navigation centrée */ html body[data-theme-version] .transformation-tabs{ display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:wrap!important; width:100%!important;margin:2.2rem auto 1.2rem!important;padding:0!important; background:transparent!important;border:0!important;box-shadow:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; } html body[data-theme-version] .transformation-tab{ background:transparent!important;border:1px solid rgba(43,44,56,.24)!important;color:var(--ink)!important; border-radius:10px!important;box-shadow:none!important; } html body[data-theme-version] .transformation-tab:hover, html body[data-theme-version] .transformation-tab:focus-visible{ background:rgba(255,255,255,.12)!important;border-color:rgba(240,90,36,.62)!important; } html body[data-theme-version] .transformation-tab.active{ background:transparent!important;color:var(--ink)!important;border-color:var(--kech-1505)!important; box-shadow:inset 0 0 0 1px rgba(240,90,36,.2)!important; } @media(max-width:700px){ html body[data-theme-version] .transformation-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important;} } /* ===== previous polish absorbed ===== */ /* KechElec — Mobile polish, theme, footer, sticky & scroll-top */ html{scroll-padding-top:calc(var(--header) + 12px);} html[data-color-theme="dark"]{--paper:#171820;--ink:#F8F5E7;--muted:#C5CBD4;--line:rgba(174,204,216,.20);color-scheme:dark;} body{transition:background .28s ease,color .28s ease;} html[data-color-theme="dark"] .contact{background:linear-gradient(135deg,#20212a,#171820);} html[data-color-theme="dark"] .contact-card{background:rgba(43,44,56,.78)!important;color:#F8F5E7;border-color:rgba(174,204,216,.22)!important;} html[data-color-theme="dark"] input,html[data-color-theme="dark"] select,html[data-color-theme="dark"] textarea{background:rgba(20,21,27,.88);color:#F8F5E7;border-color:rgba(174,204,216,.26);} html[data-color-theme="dark"] .beforeafter{background:linear-gradient(135deg,#262834,#30323f);} html[data-color-theme="dark"] .method-card{color:#F8F5E7;} html[data-color-theme="dark"] .method-card-copy strong{color:#F8F5E7;} html[data-color-theme="dark"] .method-card-copy small{color:#C5CBD4;} /* Header réellement persistant sur toute la page */ .header{position:fixed!important;inset:0 0 auto 0!important;z-index:1000!important;transform:translateZ(0);} .header.scrolled{box-shadow:0 10px 28px rgba(8,9,14,.18);} /* Sélecteur clair / sombre restauré dans le menu */ .theme-switch{display:inline-flex;align-items:center;justify-content:center;gap:.48rem;border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;font-weight:750;font-size:.82rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} .theme-switch:hover{background:rgba(255,255,255,.13);} .theme-switch-icon{line-height:1;} /* Image intervention : cadrage vertical haute définition */ .delivery img{object-position:62% 42%;image-rendering:auto;} /* 4 raccourcis : dimensions identiques + glass morphing */ .gateway-project-chips{align-items:stretch!important;} .gateway-project-chip{width:100%!important;min-width:0!important;height:100%!important;border-radius:12px!important;border:1px solid rgba(174,204,216,.30)!important;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 26px rgba(8,9,14,.18)!important;backdrop-filter:blur(15px) saturate(135%)!important;-webkit-backdrop-filter:blur(15px) saturate(135%)!important;} .gateway-project-chip:hover,.gateway-project-chip:focus-visible{border-color:rgba(255,107,0,.72)!important;background:linear-gradient(145deg,rgba(255,107,0,.16),rgba(255,255,255,.07))!important;transform:translateY(-1px);} /* Footer : deux colonnes réelles + signature produit */ .footer-grid{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:clamp(1rem,4vw,3rem)!important;align-items:start;} .footer-brand{min-width:0;}.footer-brand p{margin-top:1rem;color:rgba(255,255,255,.66);} .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.4rem;min-width:0;} .footer-group{min-width:0;}.footer-group strong{display:block;margin-bottom:.55rem;color:#fff;}.footer-group a{overflow-wrap:anywhere;} .footer-signature{margin-top:2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;color:rgba(255,255,255,.58);font-family:Inter,Arial,sans-serif;font-size:.78rem;letter-spacing:.055em;} .footer-signature .ws-mark{font-weight:800;letter-spacing:.08em;}.footer-signature sup{font-size:.62em;vertical-align:super;} /* Flèche retour haut */ .scroll-top{position:fixed;z-index:900;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(174,204,216,.32);background:rgba(43,44,56,.76);color:#fff;font-size:1.28rem;line-height:1;box-shadow:0 12px 32px rgba(8,9,14,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s ease;} .scroll-top.visible{opacity:1;visibility:visible;transform:none;}.scroll-top:hover{border-color:#FF6B00;background:rgba(59,59,75,.9);} @media (max-width:700px){ .nav.open{max-height:calc(100svh - var(--header));overflow:auto;padding-bottom:1rem;} .theme-switch{width:100%;justify-content:flex-start;margin-top:.35rem;} .method-card{width:100%!important;max-width:100%!important;grid-template-columns:46px minmax(0,1fr) 40px!important;padding:1rem .8rem!important;overflow:hidden!important;} .method-card::before{grid-column:3!important;justify-self:end!important;width:2.15rem!important;height:2.15rem!important;min-width:2.15rem!important;margin:0!important;transform:none!important;} .method-card.active{padding-right:.8rem!important;} .gateway-project-chip{min-height:48px!important;font-size:.75rem!important;padding:.6rem .45rem!important;} .footer-grid{gap:.9rem!important;} .footer-brand .brand{font-size:.8rem;}.footer-brand p{font-size:.76rem;line-height:1.48;margin-top:.7rem;} .footer-links{gap:.8rem;}.footer-group strong{font-size:.78rem;}.footer-group a{font-size:.75rem;margin:.25rem 0;} .footer-signature{font-size:.68rem;gap:.35rem;margin-top:1.4rem;text-align:center;} .scroll-top{width:42px;height:42px;} .delivery img{object-position:64% 38%;} } @media (min-width:1100px){.gateway-project-chips{grid-template-columns:repeat(4,minmax(0,1fr))!important;}.gateway-project-chip{min-height:44px!important;}} @media (prefers-reduced-motion:reduce){.scroll-top,.gateway-project-chip,body{transition:none!important;}} /* Cognitive business UI / width release / intelligent navigation */ /* Editorial content uses the full useful width of its own block. */ main :is(h1,h2,p){max-width:none!important;} .hero-v14 .hero-content,.hero-v14 .hero-copy,.hero-v14 h1, .intro>*,.story-text,.story-text p,.services-head>*,.services-head p, .precision-copy,.precision-copy h2,.precision-copy p, .transformations-heading,.transformations-heading h2, .delivery-content,.delivery-content h2,.delivery-content p, .power-bridge-copy,.method-detail-copy,.method-detail-copy p{width:100%!important;max-width:none!important;} /* Header: one language control, one theme icon, no overflow. */ .langs{display:none!important;} .lang-switcher{position:relative;flex:0 0 auto;color:#fff;} .lang-switcher summary{list-style:none;min-width:62px;height:44px;padding:0 .7rem;display:flex;align-items:center;justify-content:center;gap:.38rem;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(15px) saturate(135%);-webkit-backdrop-filter:blur(15px) saturate(135%);cursor:pointer;} .lang-switcher summary::-webkit-details-marker{display:none;}.lang-switcher summary::marker{content:"";} .lang-switcher summary b{font-size:.78rem;letter-spacing:.08em;}.lang-switcher summary i{font-style:normal;font-size:.72rem;opacity:.72;} .lang-switcher[open] summary{border-color:rgba(255,107,0,.7);background:rgba(59,59,75,.88);} .lang-dropdown{position:absolute;top:calc(100% + .55rem);right:0;z-index:1100;width:190px;padding:.45rem;border:1px solid rgba(174,204,216,.24);border-radius:12px;background:rgba(31,32,42,.96);box-shadow:0 18px 44px rgba(8,9,14,.34);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);} .lang-dropdown a{display:grid!important;grid-template-columns:34px 1fr;align-items:center;gap:.45rem;padding:.58rem .65rem!important;margin:0!important;border:0!important;border-radius:9px!important;text-decoration:none!important;} .lang-dropdown a:hover,.lang-dropdown a[aria-current="page"]{background:rgba(255,255,255,.08);} .lang-dropdown a span{font-weight:850;}.lang-dropdown a small{font-size:.76rem;opacity:.72;} body.rtl-page .lang-dropdown{right:auto;left:0;} .theme-switch{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;margin:0!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 24px rgba(8,9,14,.18)!important;} .theme-switch-icon{font-size:1.06rem!important;} /* Footer brand is intentionally visible and balanced. */ .footer-brand .brand{display:inline-flex;align-items:center;gap:.8rem;font-size:1.08rem;} .footer-brand .brand-logo{width:64px!important;height:64px!important;flex:0 0 64px!important;} .footer-brand p{width:100%!important;max-width:none!important;} /* Tablet portrait: stop squeezing text into narrow desktop columns. */ @media (min-width:701px) and (max-width:980px) and (orientation:portrait){ .intro,.story-step,.precision-wrap,.ba-wrap,.contact-grid,.method-detail{grid-template-columns:1fr!important;} .story-step:nth-child(even) .story-image{order:0!important;} .story-image,.precision-image{min-height:0!important;height:clamp(320px,58vw,520px)!important;} .precision-copy{padding:clamp(2.2rem,6vw,4rem)!important;} .method-detail-copy,.method-detail-media{order:initial!important;} .method-detail-media{min-height:300px!important;aspect-ratio:16/9!important;} } /* Intelligent collapsed navigation whenever the full bar would become cramped. */ @media (max-width:1049px){ .menu{display:block!important;flex:0 0 44px;width:44px;height:44px;} .nav{display:none!important;position:absolute!important;top:var(--header)!important;left:.65rem!important;right:.65rem!important;padding:.75rem!important;flex-direction:column!important;align-items:stretch!important;gap:.28rem!important;border:1px solid rgba(174,204,216,.24)!important;border-radius:0 0 16px 16px!important;background:rgba(31,32,42,.97)!important;box-shadow:0 20px 44px rgba(8,9,14,.30)!important;backdrop-filter:blur(20px) saturate(135%)!important;-webkit-backdrop-filter:blur(20px) saturate(135%)!important;max-height:calc(100svh - var(--header) - .75rem)!important;overflow:auto!important;} .nav.open{display:flex!important;} .nav>a{display:block!important;width:100%!important;padding:.72rem .8rem!important;border-radius:10px!important;margin:0!important;} .nav>a:hover,.nav>a:focus-visible{background:rgba(255,255,255,.07);} .lang-switcher{width:100%;margin-top:.2rem;} .lang-switcher summary{width:100%;justify-content:space-between;height:44px;} .lang-dropdown{position:static;width:100%;margin-top:.35rem;box-shadow:none;background:rgba(255,255,255,.035);} .theme-switch{margin-top:.35rem!important;} } @media (min-width:1050px){.menu{display:none!important;}.nav{display:flex!important;}.nav>a{white-space:nowrap;}.header-inner{gap:.8rem;}.nav{gap:.72rem;font-size:.84rem;}} @media (max-width:700px){ .footer-brand .brand-logo{width:56px!important;height:56px!important;flex-basis:56px!important;} .footer-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)!important;} .footer-links{grid-template-columns:1fr!important;} } /* Hero breathing room + late, corner-anchored scroll-to-top */ /* Keep editorial copy unconstrained, but restore a real container gutter around the hero. */ .hero-v14 .hero-content{ width:min(calc(100% - clamp(2rem,4vw,3.5rem)),var(--max))!important; max-width:var(--max)!important; margin-inline:auto!important; padding-inline:0!important; } .hero-v14 .hero-content :is(h1,.hero-copy,.eyebrow,.actions){ width:100%!important; max-width:none!important; } /* The control belongs to the viewport corner, not to the content. */ .scroll-top{ right:max(.75rem,env(safe-area-inset-right))!important; bottom:max(.75rem,env(safe-area-inset-bottom))!important; } @media (max-width:700px){ .hero-v14 .hero-content{ width:calc(100% - 2rem)!important; } .scroll-top{ right:max(.65rem,env(safe-area-inset-right))!important; bottom:max(.65rem,env(safe-area-inset-bottom))!important; } } /* site gateway: orientation only; conversation lives in /app/. */ .gateway-launch-stage{display:block!important;min-height:0!important;padding:clamp(1rem,2vw,1.5rem)!important;} .gateway-launch-only{width:100%;} .gateway-launch-hint{font-size:clamp(.92rem,1.4vw,1rem);line-height:1.55;} .gateway-launch-stage .gateway-project-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;width:100%;} .gateway-launch-stage .gateway-project-chip,.gateway-launch-free{min-height:48px;} @media(max-width:520px){.gateway-launch-stage .gateway-project-chips{grid-template-columns:1fr;}.gateway-launch-free{width:100%;justify-self:stretch;}} /* ========================================================================== KechElec — Premium UI Coherence Canonical public design contract. Loaded as the only KechElec site sheet. ========================================================================== */ :root{ --ke-gutter:clamp(20px,4vw,64px); --ke-radius:12px; --ke-radius-card:10px; --ke-control-h:46px; --ke-glass-bg:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035)); --ke-glass-bg-hover:linear-gradient(145deg,rgba(255,107,0,.15),rgba(255,255,255,.055)); --ke-glass-line:rgba(255,255,255,.16); --ke-glass-line-accent:rgba(255,107,0,.62); --ke-glass-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 28px rgba(7,8,13,.20); --ke-copy-max:68ch; } .container{width:100%!important;max-width:1440px!important;padding-inline:var(--ke-gutter)!important;margin-inline:auto!important;} section{scroll-margin-top:calc(var(--header) + 16px);} /* Consistent gutters and editorial measure */ .hero-content,.delivery-content{padding-inline:var(--ke-gutter)!important;} .hero-content{max-width:1440px!important;}.hero-copy,.delivery-content>p:not(.eyebrow),.precision-copy>p,.story-text>p,.method-detail-copy>p{max-width:var(--ke-copy-max)!important;} .hero h1{font-size:clamp(3rem,6.5vw,6.8rem)!important;}.hero-copy{font-size:clamp(1rem,1.45vw,1.26rem)!important;} /* Method navigation + detail: same photo language, no floating number */ .method-strip{padding:clamp(4.5rem,7vw,7rem) 0!important;} .method-heading{display:grid!important;gap:.65rem!important;margin-bottom:1.6rem!important;}.method-heading h2{max-width:22ch!important;font-size:clamp(2rem,4vw,4rem)!important;color:#292A34!important;} html[data-color-theme="dark"] .method-heading h2{color:#FAF7E8!important;} .method-cards{gap:12px!important;}.method-card{border-radius:var(--ke-radius-card)!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 14px 34px rgba(0,0,0,.15)!important;} .method-no{top:16px!important;left:16px!important;right:auto!important;font-size:2rem!important;line-height:1!important;color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.5)!important;} html[dir="rtl"] .method-no{left:auto!important;right:16px!important;} .method-detail{position:relative!important;display:block!important;min-height:clamp(380px,56vw,620px)!important;border-radius:var(--ke-radius-card)!important;overflow:hidden!important;background:#101116!important;box-shadow:0 24px 60px rgba(0,0,0,.24)!important;} .method-detail-media{position:absolute!important;inset:0!important;min-height:0!important;aspect-ratio:auto!important;}.method-detail-media img{width:100%!important;height:100%!important;object-fit:cover!important;} .method-detail:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,9,.08) 20%,rgba(5,6,9,.88) 100%);pointer-events:none;} .method-detail-copy{position:absolute!important;z-index:2!important;inset:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;padding:clamp(22px,4vw,54px)!important;color:#fff!important;} .method-detail-copy h3{font-size:clamp(2rem,4vw,4rem)!important;}.method-detail-copy p{margin-top:.7rem!important;color:rgba(255,255,255,.82)!important;font-size:clamp(.95rem,1.3vw,1.12rem)!important;} .method-detail-no{position:absolute!important;top:clamp(20px,3vw,38px)!important;left:clamp(20px,3vw,38px)!important;font-size:clamp(2.2rem,5vw,5rem)!important;color:rgba(255,255,255,.84)!important;line-height:1!important;} html[dir="rtl"] .method-detail-no{left:auto!important;right:clamp(20px,3vw,38px)!important;} /* Six professional reflexes: cards are now photographic overlays */ .story{padding:clamp(4rem,7vw,7rem) 0!important;}.story>.container>h2{max-width:23ch!important;font-size:clamp(2.1rem,4vw,4.25rem)!important;} .story-step,.story-step:nth-child(even){position:relative!important;display:block!important;min-height:clamp(360px,47vw,540px)!important;margin-top:clamp(1.1rem,2vw,1.6rem)!important;border-radius:var(--ke-radius-card)!important;overflow:hidden!important;background:#111!important;box-shadow:0 22px 54px rgba(0,0,0,.25)!important;} .story-image,.story-step:nth-child(even) .story-image{position:absolute!important;inset:0!important;order:initial!important;min-height:0!important;height:100%!important;border-radius:0!important;}.story-image img{width:100%!important;height:100%!important;object-fit:cover!important;} .story-step:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,9,.08) 18%,rgba(5,6,9,.9) 100%);} .story-text{position:absolute!important;z-index:2!important;inset:0!important;padding:clamp(22px,4vw,52px)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;color:#fff!important;} .story-text .step-no{position:absolute!important;top:clamp(18px,3vw,34px)!important;left:clamp(18px,3vw,34px)!important;font-size:clamp(2.2rem,5vw,4.8rem)!important;color:rgba(255,255,255,.82)!important;line-height:1!important;} html[dir="rtl"] .story-text .step-no{left:auto!important;right:clamp(18px,3vw,34px)!important;}.story-text h3{font-size:clamp(1.8rem,3.4vw,3.4rem)!important;}.story-text p{margin-top:.65rem!important;color:rgba(255,255,255,.82)!important;font-size:clamp(.95rem,1.25vw,1.08rem)!important;} /* Precision: one image, integrated editorial overlay */ .precision{padding:clamp(2rem,4vw,4rem) var(--ke-gutter)!important;background:#1C1D26!important;} .precision-wrap{position:relative!important;display:block!important;max-width:1312px!important;min-height:clamp(520px,72vw,780px)!important;margin:auto!important;border-radius:var(--ke-radius-card)!important;overflow:hidden!important;background:#111!important;box-shadow:0 28px 70px rgba(0,0,0,.28)!important;} .precision-image{position:absolute!important;inset:0!important;height:100%!important;}.precision-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;} .precision-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,10,.83) 0%,rgba(6,7,10,.52) 42%,rgba(6,7,10,.12) 74%),linear-gradient(0deg,rgba(6,7,10,.55),transparent 50%);} .precision-copy{position:absolute!important;z-index:2!important;left:0!important;bottom:0!important;width:min(720px,72%)!important;padding:clamp(26px,5vw,64px)!important;justify-content:flex-end!important;color:#fff!important;} .precision-copy h2{font-size:clamp(2.2rem,4.6vw,4.8rem)!important;max-width:15ch!important;color:#fff!important;}.precision-copy p{margin-top:1rem!important;color:rgba(255,255,255,.82)!important;font-size:clamp(.96rem,1.25vw,1.1rem)!important;} /* Delivery hero: controlled gutter and type scale */ .delivery{min-height:clamp(600px,82svh,860px)!important;}.delivery:after{background:linear-gradient(90deg,rgba(5,6,9,.76) 0%,rgba(5,6,9,.46) 46%,rgba(5,6,9,.05) 76%),linear-gradient(0deg,rgba(5,6,9,.48),transparent 60%)!important;} .delivery-content{width:100%!important;max-width:1440px!important;padding-top:clamp(34px,6vw,72px)!important;padding-bottom:clamp(34px,6vw,72px)!important;}.delivery h2{font-size:clamp(2.4rem,5.2vw,5.4rem)!important;max-width:18ch!important;line-height:.96!important;}.delivery p{font-size:clamp(.98rem,1.25vw,1.12rem)!important;} /* Public gateway is a launchpad, not a second PWA */ .contact{padding-block:clamp(3rem,6vw,5.5rem)!important;}.contact-grid{gap:clamp(1.5rem,3vw,2.6rem)!important;} .conversation-gateway{min-height:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;gap:18px!important;padding:clamp(24px,4vw,42px)!important;border-radius:var(--ke-radius-card)!important;} .conversation-gateway::before,.conversation-gateway::after{opacity:.14!important;}.gateway-copy{grid-column:1!important;grid-row:auto!important;align-self:auto!important;padding:0!important;max-width:880px!important;}.gateway-copy h2{font-size:clamp(2rem,4vw,4.25rem)!important;max-width:18ch!important;white-space:normal!important;overflow:visible!important;}.gateway-copy .power-bridge-copy{max-width:62ch!important;font-size:clamp(.95rem,1.2vw,1.08rem)!important;} .gateway-stage,.gateway-launch-stage{display:block!important;grid-column:1!important;grid-row:auto!important;min-height:0!important;height:auto!important;padding:0!important;}.gateway-launch-only{display:grid!important;gap:12px!important;}.gateway-launch-hint{margin:0!important;color:rgba(255,255,255,.72)!important;}.gateway-project-chips{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;}.gateway-project-chip{min-height:48px!important;padding:.7rem .75rem!important;text-align:center!important;justify-content:center!important;}.gateway-launch-free{justify-self:start!important;min-width:190px!important;}.gateway-trust-strip{position:static!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:0!important;background:transparent!important;border:0!important;}.gateway-trust-item{min-height:64px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:var(--ke-radius)!important;padding:10px 12px!important;background:rgba(255,255,255,.035)!important;} /* Forms + map controls */ .contact-card{border-radius:var(--ke-radius-card)!important;padding:clamp(20px,3vw,38px)!important;}.contact-card input,.contact-card select,.contact-card textarea{border-radius:var(--ke-radius)!important;}.contact-card input,.contact-card select{min-height:var(--ke-control-h)!important;}.contact-card textarea{min-height:132px!important;}.geo-picker{border-radius:var(--ke-radius-card)!important;overflow:hidden!important;}.geo-actions{gap:10px!important;}.geo-actions button,.geo-search button,.geo-confirm-row button{min-height:var(--ke-control-h)!important;border-radius:var(--ke-radius)!important;}.geo-map{border-radius:var(--ke-radius)!important;overflow:hidden!important;} .leaflet-control-layers{display:none!important;} /* Footer + scroll top */ .footer{padding:3rem 0 1.2rem!important;}.footer-signature{padding-top:1rem!important;}.scroll-top{border-radius:12px!important;} @media(max-width:900px){ :root{--ke-gutter:clamp(18px,4.8vw,28px);} .gateway-project-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.gateway-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .precision{padding-inline:var(--ke-gutter)!important;}.precision-wrap{min-height:560px!important;}.precision-wrap:after{background:linear-gradient(0deg,rgba(5,6,9,.88) 0%,rgba(5,6,9,.35) 68%,rgba(5,6,9,.05) 100%);}.precision-copy{width:100%!important;padding:clamp(24px,6vw,40px)!important;}.precision-copy h2{font-size:clamp(2rem,8vw,3.6rem)!important;max-width:16ch!important;} .delivery:after{background:linear-gradient(0deg,rgba(5,6,9,.82) 0%,rgba(5,6,9,.2) 68%,rgba(5,6,9,.02) 100%)!important;}.delivery h2{font-size:clamp(2.3rem,9vw,4.2rem)!important;max-width:16ch!important;} } @media(max-width:600px){ .method-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}.method-card:last-child{grid-column:1/-1!important;}.method-detail{min-height:430px!important;} .story-step{min-height:400px!important;}.gateway-project-chips,.gateway-trust-strip{grid-template-columns:1fr!important;}.gateway-launch-free{width:100%!important;}.actions .btn{width:100%!important;min-width:0!important;}.ke-map-switch button{min-width:60px!important;padding-inline:8px!important;} } @media(prefers-reduced-motion:reduce){.btn,.gateway-project-chip,.geo-actions button,.contact-card button{transition:none!important;transform:none!important;}} /* KechElec — real dual-theme lock (dark / light) */ html[data-color-theme="light"]{--paper:#F7F1E5;--ink:#1F2027;--muted:#5F616B;--line:rgba(31,32,39,.14);color-scheme:light;} html[data-color-theme="light"] .header, html[data-color-theme="light"] .header.scrolled{background:linear-gradient(180deg,rgba(247,241,229,.94),rgba(242,235,224,.86))!important;border-color:rgba(31,32,39,.10)!important;box-shadow:0 12px 34px rgba(31,32,39,.08)!important;} html[data-color-theme="light"] .brand, html[data-color-theme="light"] .nav a, html[data-color-theme="light"] .lang-trigger, html[data-color-theme="light"] .theme-switch{color:#1F2027!important;} html[data-color-theme="light"] .lang-trigger, html[data-color-theme="light"] .theme-switch, html[data-color-theme="light"] .menu{border-color:rgba(31,32,39,.12)!important;background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(240,232,220,.74))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px rgba(31,32,39,.08)!important;} html[data-color-theme="light"] .lang-dropdown{background:rgba(255,250,244,.98)!important;border-color:rgba(31,32,39,.10)!important;box-shadow:0 18px 40px rgba(31,32,39,.12)!important;} html[data-color-theme="light"] .lang-dropdown a{color:#1F2027!important;} html[data-color-theme="light"] .hero-overlay{background:linear-gradient(90deg,rgba(247,241,229,.26),rgba(247,241,229,.12) 34%,rgba(31,32,39,.10) 100%)!important;} html[data-color-theme="light"] .hero-content .eyebrow{color:#D36C2F!important;text-shadow:none!important;} html[data-color-theme="light"] .hero-content h1{color:#fff!important;text-shadow:0 12px 28px rgba(0,0,0,.28);} html[data-color-theme="light"] .hero-copy{color:rgba(255,255,255,.92)!important;text-shadow:0 8px 24px rgba(0,0,0,.22);} html[data-color-theme="light"] :is(.method-card,.service,.testimonial,.contact-card,.conversation-gateway,.transformation-tab){background:rgba(255,249,242,.92)!important;color:#1F2027!important;border-color:rgba(31,32,39,.10)!important;box-shadow:0 16px 42px rgba(31,32,39,.08)!important;} html[data-color-theme="light"] .method-card-copy strong, html[data-color-theme="light"] .service h3, html[data-color-theme="light"] .contact-card label, html[data-color-theme="light"] .gateway-copy h2, html[data-color-theme="light"] .testimonial blockquote{color:#1F2027!important;} html[data-color-theme="light"] :is(.gateway-launch-hint,.power-bridge-copy,.gateway-trust-item small,.method-card-copy small,.testimonial p,.contact-card p,.field input,.field select,.field textarea){color:#5F616B!important;} html[data-color-theme="light"] input,html[data-color-theme="light"] select,html[data-color-theme="light"] textarea{background:rgba(255,255,255,.92)!important;color:#1F2027!important;border-color:rgba(31,32,39,.14)!important;} html[data-color-theme="light"] .btn-ghost{color:#1F2027!important;border-color:rgba(31,32,39,.15)!important;background:rgba(255,255,255,.72)!important;} html[data-color-theme="light"] .footer{background:linear-gradient(180deg,#EDE4D5,#E4D8C7)!important;color:#1F2027!important;} html[data-color-theme="light"] .footer a,html[data-color-theme="light"] .footer-brand p,html[data-color-theme="light"] .footer-signature{color:#1F2027!important;} html[data-color-theme="light"] .scroll-top{background:rgba(255,255,255,.86)!important;color:#1F2027!important;border-color:rgba(31,32,39,.15)!important;} /* Global Brand Asset Authority */ .brand.brand-official,.brand:has(.brand-full-logo){display:flex!important;align-items:center!important;max-width:min(330px,48vw)!important;} .header .brand-full-logo{display:block;width:min(286px,40vw)!important;height:auto!important;max-height:62px!important;object-fit:contain!important;} .footer .brand-full-logo{display:block;width:min(360px,86vw)!important;height:auto!important;max-height:112px!important;object-fit:contain!important;} .footer-signature .ws-mark{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;} @media(max-width:640px){.header .brand-full-logo{width:min(205px,56vw)!important;max-height:48px!important;}.footer .brand-full-logo{width:min(300px,88vw)!important;}} /* KechElec — Canonical UI Contract Shared visual rules for public site + client/artisan/PWA workspaces. Keep this file as the single source of truth for controls, radii, focus and spacing. */ :root{ --ke-ui-gutter:clamp(18px,4vw,64px); --ke-ui-control-h:46px; --ke-ui-control-h-compact:38px; --ke-ui-radius-control:8px; --ke-ui-radius-card:8px; --ke-ui-font-button:750 14px/1.15 Inter,Arial,sans-serif; --ke-ui-glass-bg:linear-gradient(145deg,rgba(41,42,52,.92),rgba(15,16,21,.88)); --ke-ui-glass-bg-hover:linear-gradient(145deg,rgba(55,56,68,.96),rgba(20,21,27,.93)); --ke-ui-glass-line:rgba(255,255,255,.16); --ke-ui-glass-line-accent:rgba(255,107,0,.62); --ke-ui-glass-highlight:inset 0 1px 0 rgba(255,255,255,.16); --ke-ui-glass-shadow:var(--ke-ui-glass-highlight),inset 0 -1px 0 rgba(255,107,0,.13),0 10px 26px rgba(4,5,9,.22); --ke-ui-focus:0 0 0 3px rgba(255,107,0,.20),0 10px 28px rgba(4,5,9,.24); --ke-ui-field-bg-dark:rgba(20,21,27,.86); --ke-ui-field-line-dark:rgba(174,204,216,.25); } /* Public controls — black polished glass, one geometry. Photo-cards are intentionally excluded. */ .ke-site :is( .btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab, .geo-actions button,.geo-confirm-row button,.contact-card button[type="submit"], .theme-switch,.menu,.lang-trigger,.scroll-top ){ min-height:var(--ke-ui-control-h)!important; border-radius:var(--ke-ui-radius-control)!important; border:1px solid var(--ke-ui-glass-line)!important; background:var(--ke-ui-glass-bg)!important; color:#fff!important; font:var(--ke-ui-font-button)!important; box-shadow:var(--ke-ui-glass-shadow)!important; backdrop-filter:blur(14px) saturate(138%)!important; -webkit-backdrop-filter:blur(14px) saturate(138%)!important; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important; } .ke-site :is( .btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab, .geo-actions button,.geo-confirm-row button,.contact-card button[type="submit"], .theme-switch,.menu,.lang-trigger,.scroll-top ):hover{ transform:translateY(-1px)!important; border-color:var(--ke-ui-glass-line-accent)!important; background:var(--ke-ui-glass-bg-hover)!important; } .ke-site :is( .btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab, .geo-actions button,.geo-confirm-row button,.contact-card button[type="submit"], .theme-switch,.menu,.lang-trigger,.scroll-top ):focus-visible{ outline:0!important;border-color:var(--ke-ui-glass-line-accent)!important;box-shadow:var(--ke-ui-focus)!important; } .ke-site :is(.btn-primary,.contact-card button[type="submit"],.geo-search button,.geo-confirm,.transformation-tab.active){ border-color:var(--ke-ui-glass-line-accent)!important; background:linear-gradient(145deg,rgba(49,50,61,.98),rgba(18,19,24,.96))!important; box-shadow:var(--ke-ui-glass-highlight),inset 0 -2px 0 rgba(255,107,0,.38),0 12px 30px rgba(0,0,0,.26)!important; } .ke-site :is(.theme-switch,.menu){width:46px!important;min-width:46px!important;padding:0!important;} /* Form affordance: unmistakably editable, high contrast in both themes. */ .ke-site .contact-card textarea{ min-height:156px!important; cursor:text!important; color:#fffaf5!important; background:linear-gradient(145deg,rgba(67,68,82,.76),rgba(37,38,48,.82))!important; border:1px solid rgba(255,255,255,.24)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,107,0,.04)!important; } .ke-site .contact-card textarea::placeholder{color:rgba(255,250,245,.72)!important;opacity:1!important;} .ke-site .contact-card textarea:hover{border-color:rgba(255,255,255,.34)!important;background:linear-gradient(145deg,rgba(72,73,88,.80),rgba(40,41,52,.86))!important;} .ke-site .contact-card textarea:focus{ outline:0!important;border-color:rgba(255,107,0,.72)!important; box-shadow:0 0 0 3px rgba(255,107,0,.14),inset 0 1px 0 rgba(255,255,255,.11)!important; } html[data-color-theme="light"] .ke-site .contact-card textarea, html[data-color-theme="dark"] .ke-site .contact-card textarea{color:#fffaf5!important;} /* Map layer switch: deliberately quieter than primary actions. */ .ke-site .ke-map-switch.leaflet-control{ display:flex!important;gap:3px!important;margin:8px!important;padding:3px!important; border:1px solid rgba(255,255,255,.13)!important; background:rgba(17,18,22,.62)!important;box-shadow:0 8px 20px rgba(0,0,0,.22)!important; backdrop-filter:blur(10px) saturate(125%)!important;-webkit-backdrop-filter:blur(10px) saturate(125%)!important; } .ke-site .ke-map-switch button{ min-width:56px!important;height:32px!important;min-height:32px!important;padding:0 7px!important; border:1px solid transparent!important;background:transparent!important;color:#f0f1f4!important; font:740 11px/1 Inter,Arial,sans-serif!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } .ke-site .ke-map-switch button:hover{transform:none!important;background:rgba(255,255,255,.08)!important;} .ke-site .ke-map-switch button.active{border-color:rgba(255,107,0,.50)!important;background:rgba(23,24,30,.74)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;} /* PWA voice controls */ /* Client + artisan workspaces inherit exactly the same control material. */ @media(max-width:600px){ :root{--ke-ui-control-h:44px;} .ke-site .ke-map-switch.leaflet-control{margin:6px!important;padding:3px!important;} .ke-site .ke-map-switch button{min-width:50px!important;height:30px!important;min-height:30px!important;padding-inline:6px!important;font-size:10.5px!important;} } @media(prefers-reduced-motion:reduce){ .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-actions button,.geo-confirm-row button,.contact-card button,.theme-switch,.menu,.scroll-top){transition:none!important;transform:none!important;} } /* ========================================================================== Responsive Sovereignty & Visual QA This block is normative. It deliberately overrides legacy breakpoint rules. Device class is determined by usable viewport, not width alone. ========================================================================== */ :root{ --ke-ui-page-max:1440px; --ke-ui-copy-max:72ch; --ke-ui-header-h:76px; --ke-ui-section-y:clamp(56px,7vw,104px); --ke-ui-section-y-compact:clamp(38px,5vw,70px); --ke-ui-photo-overlay:linear-gradient(180deg,rgba(5,6,9,.05) 18%,rgba(5,6,9,.38) 52%,rgba(5,6,9,.92) 100%); } /* One gutter, one anchor offset, one readable width. */ .ke-site .container{ width:100%!important; max-width:var(--ke-ui-page-max)!important; margin-inline:auto!important; padding-inline:var(--ke-ui-gutter)!important; } .ke-site main > section, .ke-site section[id]{scroll-margin-top:calc(var(--header) + 18px)!important;} .ke-site :is(.method-heading,.services-head,.delivery-content,.precision-copy,.story-text,.contact-card){min-width:0!important;} .ke-site :is(.method-heading h2,.services-head h2,.delivery-content h2,.precision-copy h2){text-wrap:balance!important;} /* Mobile navigation: opaque enough to be read, still visibly glass. */ @media(max-width:960px){ .ke-site .nav.open{ background:linear-gradient(155deg,rgba(29,30,39,.985),rgba(15,16,22,.975))!important; border:1px solid rgba(255,255,255,.12)!important; box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)!important; backdrop-filter:blur(22px) saturate(135%)!important; -webkit-backdrop-filter:blur(22px) saturate(135%)!important; border-radius:0 0 16px 16px!important; } .ke-site .nav.open > a{width:100%!important;padding:.72rem .8rem!important;border-radius:10px!important;} .ke-site .nav.open > a:hover{background:rgba(255,255,255,.07)!important;} .ke-site .nav.open .lang-switcher{width:100%!important;margin-top:.25rem!important;} .ke-site .nav.open .lang-switcher summary{width:100%!important;justify-content:space-between!important;} .ke-site .nav.open .theme-switch{width:44px!important;margin-top:.45rem!important;justify-content:center!important;} } /* METHOD — one component, one DOM, one visual grammar. */ .ke-site .method-strip{ padding:var(--ke-ui-section-y-compact) 0!important; background:#f5efe7!important; overflow:hidden!important; } html[data-color-theme="dark"] .ke-site .method-strip{background:#1c1d26!important;} .ke-site .method-heading{ width:100%!important;max-width:none!important;margin:0 0 clamp(18px,2.5vw,34px)!important; padding:0!important;text-align:start!important; } .ke-site .method-heading .eyebrow{display:block!important;width:100%!important;margin:0 0 8px!important;} .ke-site .method-heading h2{ width:100%!important;max-width:none!important;margin:0!important; color:#292a34!important;font-size:clamp(2rem,3.7vw,3.8rem)!important;line-height:1.02!important; letter-spacing:-.032em!important; } html[data-color-theme="dark"] .ke-site .method-heading h2{color:#fbf7e8!important;} .ke-site .method-cards{ width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important;overflow:visible!important;padding:2px!important; } .ke-site .method-card{ position:relative!important;display:block!important;width:100%!important;min-width:0!important; min-height:168px!important;padding:0!important; overflow:hidden!important;isolation:isolate!important;text-align:start!important; border:1px solid rgba(255,255,255,.11)!important;background:#17181f!important; box-shadow:0 14px 34px rgba(10,11,16,.18)!important; } .ke-site .method-card picture,.ke-site .method-card picture img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;} .ke-site .method-card picture img{object-fit:cover!important;transition:transform .35s ease!important;} .ke-site .method-card::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;} .ke-site .method-card::before{display:none!important;} .ke-site .method-card .method-no{ position:absolute!important;inset-block-start:14px!important;inset-inline-start:14px!important;z-index:2!important; color:#fff!important;font:700 clamp(1.75rem,2.7vw,2.6rem)/1 Georgia,"Times New Roman",serif!important; text-shadow:0 2px 10px rgba(0,0,0,.55)!important; } .ke-site .method-card-copy{ position:absolute!important;z-index:2!important;inset-inline:14px!important;inset-block-end:14px!important; display:grid!important;gap:3px!important;text-align:start!important; } .ke-site .method-card-copy strong{color:#fff!important;font:700 clamp(1rem,1.35vw,1.22rem)/1.08 Georgia,"Times New Roman",serif!important;} .ke-site .method-card-copy small{color:rgba(255,255,255,.78)!important;font-size:.78rem!important;line-height:1.28!important;} .ke-site .method-card.active{border-color:rgba(255,255,255,.44)!important;} .ke-site .method-card.active picture img{transform:scale(1.025)!important;} /* Full-width detail: photo is the canvas; copy never competes in a second column. */ .ke-site .method-details{display:block!important;width:100%!important;margin-top:16px!important;} .ke-site .method-detail{ position:relative!important;display:block!important;width:100%!important;min-height:clamp(360px,42vw,560px)!important; border-radius:var(--ke-ui-radius-card)!important;overflow:hidden!important;background:#111!important;color:#fff!important; box-shadow:0 22px 54px rgba(0,0,0,.24)!important; } .ke-site .method-detail[hidden]{display:none!important;} .ke-site .method-detail-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;} .ke-site .method-detail-media picture,.ke-site .method-detail-media img{display:block!important;width:100%!important;height:100%!important;} .ke-site .method-detail-media img{object-fit:cover!important;} .ke-site .method-detail::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ke-ui-photo-overlay);} .ke-site .method-detail-copy{ position:absolute!important;z-index:2!important;inset:0!important;width:100%!important;max-width:none!important; padding:clamp(22px,4vw,52px)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important; color:#fff!important; } .ke-site .method-detail-no{ position:absolute!important;inset-block-start:clamp(18px,3vw,34px)!important;inset-inline-start:clamp(18px,3vw,34px)!important; color:rgba(255,255,255,.88)!important;font-size:clamp(2.5rem,5vw,4.5rem)!important;line-height:1!important; } .ke-site .method-detail-copy h3{margin:0!important;color:#fff!important;font-size:clamp(1.9rem,3.4vw,3.3rem)!important;line-height:1.03!important;} .ke-site .method-detail-copy p{width:100%!important;max-width:72ch!important;margin:.7rem 0 0!important;color:rgba(255,255,255,.84)!important;font-size:clamp(.96rem,1.2vw,1.08rem)!important;line-height:1.52!important;} /* Method focal points — work/tool first. */ .ke-site .method-card:nth-child(1) img,.ke-site #method-panel-0 img{object-position:72% 50%!important;} .ke-site .method-card:nth-child(2) img,.ke-site #method-panel-1 img{object-position:58% 48%!important;} .ke-site .method-card:nth-child(3) img,.ke-site #method-panel-2 img{object-position:67% 50%!important;} .ke-site .method-card:nth-child(4) img,.ke-site #method-panel-3 img{object-position:64% 50%!important;} .ke-site .method-card:nth-child(5) img,.ke-site #method-panel-4 img{object-position:66% 50%!important;} /* STORY — same image-led grammar and explicit focal points. */ .ke-site .story-step,.ke-site .story-step:nth-child(even){ position:relative!important;display:block!important;width:100%!important;min-height:clamp(380px,46vw,540px)!important; margin-top:clamp(18px,2.4vw,30px)!important;border-radius:var(--ke-ui-radius-card)!important;overflow:hidden!important; background:#111!important;box-shadow:0 22px 54px rgba(0,0,0,.24)!important; } .ke-site .story-image,.ke-site .story-step:nth-child(even) .story-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;border-radius:0!important;} .ke-site .story-image picture,.ke-site .story-image img{width:100%!important;height:100%!important;display:block!important;} .ke-site .story-image img{object-fit:cover!important;} .ke-site .story-step::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ke-ui-photo-overlay);} .ke-site .story-text{ position:absolute!important;z-index:2!important;inset:0!important;width:100%!important;max-width:none!important; padding:clamp(22px,4vw,52px)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;color:#fff!important;text-align:start!important; } .ke-site .story-text .step-no{position:absolute!important;inset-block-start:clamp(18px,3vw,34px)!important;inset-inline-start:clamp(18px,3vw,34px)!important;color:rgba(255,255,255,.86)!important;font-size:clamp(2.5rem,5vw,4.5rem)!important;line-height:1!important;} .ke-site .story-text h3{color:#fff!important;font-size:clamp(1.85rem,3.2vw,3.2rem)!important;line-height:1.04!important;} .ke-site .story-text p{width:100%!important;max-width:72ch!important;margin:.7rem 0 0!important;color:rgba(255,255,255,.84)!important;font-size:clamp(.96rem,1.2vw,1.08rem)!important;line-height:1.52!important;} .ke-site .story-step:nth-of-type(1) img{object-position:72% 50%!important;} .ke-site .story-step:nth-of-type(2) img{object-position:58% 48%!important;} .ke-site .story-step:nth-of-type(3) img{object-position:66% 50%!important;} .ke-site .story-step:nth-of-type(4) img{object-position:70% 50%!important;} .ke-site .story-step:nth-of-type(5) img{object-position:65% 50%!important;} .ke-site .story-step:nth-of-type(6) img{object-position:72% 50%!important;} /* Services: coherent grid + métier focal points. */ .ke-site .service-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;} .ke-site .service{border-radius:var(--ke-ui-radius-card)!important;} .ke-site .service-content{inset:auto 20px 20px!important;} .ke-site .service:nth-child(1) img{object-position:48% 50%!important;} .ke-site .service:nth-child(2) img{object-position:66% 50%!important;} .ke-site .service:nth-child(3) img{object-position:86% 28%!important;} /* Precision and delivery: same gutter, controlled type, no edge collisions. */ .ke-site .precision{position:relative!important;overflow:hidden!important;padding:0!important;} .ke-site .precision-wrap{position:relative!important;display:block!important;min-height:clamp(520px,72vw,760px)!important;} .ke-site .precision-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;} .ke-site .precision-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:58% 50%!important;} .ke-site .precision-wrap::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,6,9,.08) 18%,rgba(5,6,9,.30) 52%,rgba(5,6,9,.90) 100%);} .ke-site .precision-copy{position:absolute!important;z-index:2!important;inset:0!important;width:100%!important;max-width:none!important;padding:var(--ke-ui-gutter)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;color:#fff!important;} .ke-site .precision-copy h2{width:100%!important;max-width:18ch!important;color:#fff!important;font-size:clamp(2.15rem,4vw,4.35rem)!important;} .ke-site .precision-copy p{width:100%!important;max-width:68ch!important;color:rgba(255,255,255,.84)!important;} .ke-site .delivery{min-height:clamp(520px,76svh,820px)!important;align-items:end!important;} .ke-site .delivery img{object-position:64% 44%!important;} .ke-site .delivery-content.container{width:100%!important;max-width:var(--ke-ui-page-max)!important;padding:clamp(34px,6vw,72px) var(--ke-ui-gutter)!important;} .ke-site .delivery h2{width:100%!important;max-width:18ch!important;font-size:clamp(2.25rem,4.6vw,4.75rem)!important;line-height:.98!important;} .ke-site .delivery p{width:100%!important;max-width:70ch!important;font-size:clamp(.98rem,1.25vw,1.1rem)!important;} /* Footer: responsive hierarchy + permanent visible build number. */ .ke-site .footer{padding:2.7rem 0 max(20px,env(safe-area-inset-bottom))!important;} .ke-site .footer-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:clamp(22px,4vw,48px)!important;} .ke-site .footer-signature{padding-inline:var(--ke-ui-gutter)!important;} .ke-site .ke-version{font-weight:800!important;color:rgba(255,255,255,.82)!important;letter-spacing:.04em!important;white-space:nowrap!important;} .ke-site .scroll-top{inset-inline-end:max(12px,env(safe-area-inset-right))!important;} /* Workspace version marker (client/artisan/app): visible but not intrusive. */ .ke-workspace-version,.ke-app-version{ position:fixed;z-index:900;inset-inline-start:max(10px,env(safe-area-inset-left));inset-block-end:max(8px,env(safe-area-inset-bottom)); padding:4px 7px;border-radius:8px;border:1px solid rgba(255,255,255,.11);background:rgba(15,16,21,.68);color:rgba(255,255,255,.58); font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none; } /* Portrait phone: rail, not a squeezed grid; details remain full-width. */ @media(max-width:600px){ :root{--ke-ui-gutter:18px;--ke-ui-header-h:62px;} .ke-site .method-heading h2{font-size:clamp(2rem,9.1vw,2.8rem)!important;line-height:1.04!important;} .ke-site .method-card,.ke-site .method-card:last-child{grid-column:auto!important;min-height:172px!important;scroll-snap-align:start!important;} .ke-site .method-detail{min-height:390px!important;} .ke-site .method-detail-copy{padding:22px!important;} .ke-site .method-detail-no{inset-block-start:20px!important;inset-inline-start:20px!important;font-size:3rem!important;} .ke-site .method-detail-copy h3{font-size:1.9rem!important;} .ke-site .method-detail-copy p{font-size:.98rem!important;line-height:1.5!important;} .ke-site .method-card:nth-child(2) img,.ke-site #method-panel-1 img{object-position:62% 50%!important;} .ke-site .method-card:nth-child(3) img,.ke-site #method-panel-2 img{object-position:68% 50%!important;} .ke-site .method-card:nth-child(4) img,.ke-site #method-panel-3 img{object-position:70% 50%!important;} .ke-site .method-card:nth-child(5) img,.ke-site #method-panel-4 img{object-position:68% 50%!important;} .ke-site .story-step{min-height:390px!important;} .ke-site .story-text{padding:22px!important;} .ke-site .story-text .step-no{inset-block-start:20px!important;inset-inline-start:20px!important;font-size:3rem!important;} .ke-site .story-text h3{font-size:1.9rem!important;}.ke-site .story-text p{font-size:.98rem!important;line-height:1.5!important;} .ke-site .story-step:nth-of-type(2) img{object-position:60% 50%!important;} .ke-site .story-step:nth-of-type(3) img{object-position:68% 50%!important;} .ke-site .story-step:nth-of-type(4) img{object-position:74% 50%!important;} .ke-site .story-step:nth-of-type(5) img{object-position:68% 50%!important;} .ke-site .story-step:nth-of-type(6) img{object-position:74% 50%!important;} .ke-site .service-grid{grid-template-columns:1fr!important;} .ke-site .service{height:clamp(310px,95vw,400px)!important;} .ke-site .service:nth-child(3) img{object-position:82% 18%!important;} .ke-site .precision-wrap{min-height:540px!important;} .ke-site .precision-copy{padding:var(--ke-ui-gutter)!important;} .ke-site .precision-copy h2{max-width:none!important;} .ke-site .delivery{min-height:610px!important;} .ke-site .delivery img{object-position:65% 46%!important;} .ke-site .delivery-content.container{padding:38px var(--ke-ui-gutter)!important;} .ke-site .delivery h2{font-size:clamp(2.15rem,10vw,3.25rem)!important;max-width:none!important;} .ke-site .footer-grid{grid-template-columns:1fr!important;gap:22px!important;} .ke-site .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;} .ke-site .footer-brand .brand-logo{width:54px!important;height:54px!important;flex-basis:54px!important;} .ke-site .footer-brand p{font-size:.82rem!important;max-width:34ch!important;} .ke-site .footer-signature{justify-content:flex-start!important;text-align:start!important;gap:6px!important;padding-top:16px!important;font-size:.68rem!important;} } /* Phone landscape is its own product layer. Width must never promote it to desktop. */ @media(orientation:landscape) and (max-height:500px) and (max-width:960px){ :root{--ke-ui-gutter:clamp(20px,4vw,34px);--ke-ui-control-h:40px;} .ke-site section{padding-block:34px!important;} .ke-site .header{height:60px!important;}.ke-site{--header:60px!important;} .ke-site .brand-logo{width:42px!important;height:42px!important;}.ke-site .brand{font-size:1rem!important;} .ke-site .method-strip{padding:34px 0 30px!important;} .ke-site .method-heading{margin-bottom:16px!important;} .ke-site .method-heading h2{font-size:clamp(1.85rem,4.5vw,2.55rem)!important;line-height:1.02!important;} .ke-site .method-cards{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:row!important;gap:8px!important;overflow:visible!important;padding:2px!important;} .ke-site .method-card{min-height:132px!important;} .ke-site .method-card-copy small{display:none!important;} .ke-site .method-card .method-no{font-size:1.75rem!important;inset-block-start:10px!important;inset-inline-start:10px!important;} .ke-site .method-card-copy{inset-inline:10px!important;inset-block-end:10px!important;}.ke-site .method-card-copy strong{font-size:.95rem!important;} .ke-site .method-detail{min-height:260px!important;} .ke-site .method-detail-copy{padding:18px 22px!important;}.ke-site .method-detail-no{font-size:2.3rem!important;inset-block-start:16px!important;inset-inline-start:20px!important;} .ke-site .method-detail-copy h3{font-size:1.6rem!important;}.ke-site .method-detail-copy p{font-size:.91rem!important;line-height:1.4!important;max-width:68ch!important;} .ke-site .story{padding:34px 0!important;} .ke-site .story-step{min-height:280px!important;margin-top:14px!important;} .ke-site .story-text{padding:20px 24px!important;}.ke-site .story-text .step-no{font-size:2.3rem!important;inset-block-start:16px!important;inset-inline-start:20px!important;} .ke-site .story-text h3{font-size:1.65rem!important;}.ke-site .story-text p{font-size:.92rem!important;line-height:1.42!important;max-width:68ch!important;} .ke-site .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:18px!important;} .ke-site .service{height:250px!important;min-height:0!important;}.ke-site .service-content{inset:auto 14px 14px!important;}.ke-site .service-content h3{font-size:1.18rem!important;}.ke-site .service p{font-size:.78rem!important;line-height:1.3!important;} .ke-site .service:nth-child(3) img{object-position:86% 18%!important;} .ke-site .precision-wrap{min-height:300px!important;}.ke-site .precision-copy{padding:22px var(--ke-ui-gutter)!important;}.ke-site .precision-copy h2{font-size:clamp(1.9rem,4.6vw,2.55rem)!important;max-width:16ch!important;}.ke-site .precision-copy p{font-size:.9rem!important;line-height:1.4!important;} .ke-site .delivery{min-height:300px!important;}.ke-site .delivery-content.container{padding:24px var(--ke-ui-gutter)!important;}.ke-site .delivery h2{font-size:clamp(1.9rem,4.8vw,2.65rem)!important;max-width:18ch!important;}.ke-site .delivery p{font-size:.9rem!important;line-height:1.4!important;max-width:66ch!important;}.ke-site .delivery .actions{margin-top:14px!important;}.ke-site .delivery .btn{min-height:40px!important;width:auto!important;} } /* RTL uses logical properties everywhere. */ .ke-site.rtl-page .method-heading,.ke-site.rtl-page .method-card,.ke-site.rtl-page .method-card-copy,.ke-site.rtl-page .method-detail-copy,.ke-site.rtl-page .story-text{text-align:start!important;} @media(max-width:600px){ } .ke-site .scroll-top.footer-safe{bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px))!important;} @media(max-width:600px){.ke-site .scroll-top.footer-safe{bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px))!important;}} /* Gateway/site launcher: never inherits the obsolete avatar two-column grid. */ .ke-site .conversation-gateway{ min-height:0!important;height:auto!important; padding:clamp(24px,4vw,42px)!important;border-radius:var(--ke-ui-radius-card)!important;overflow:hidden!important; } .ke-site .gateway-copy,.ke-site .gateway-stage,.ke-site .gateway-launch-stage,.ke-site .gateway-launch-only{width:100%!important;min-width:0!important;max-width:none!important;} .ke-site .gateway-copy{grid-column:1!important;} .ke-site .gateway-copy h2{width:100%!important;max-width:none!important;font-size:clamp(2rem,4vw,4rem)!important;line-height:1!important;overflow:visible!important;white-space:normal!important;} .ke-site .gateway-copy .power-bridge-copy{width:100%!important;max-width:68ch!important;font-size:clamp(.96rem,1.2vw,1.08rem)!important;} .ke-site .gateway-stage,.ke-site .gateway-launch-stage{display:block!important;grid-column:1!important;grid-row:auto!important;height:auto!important;min-height:0!important;padding:0!important;} .ke-site .gateway-trust-strip{width:100%!important;} .ke-site .gateway-trust-item{min-height:64px!important;border:1px solid rgba(255,255,255,.12)!important;padding:10px 12px!important;background:rgba(255,255,255,.035)!important;} /* Section heads that were still governed by old desktop typography. */ .ke-site .story > .container > h2,.ke-site .services-head h2{ width:100%!important;max-width:none!important;font-size:clamp(2.1rem,4.2vw,4.1rem)!important;line-height:1.02!important;text-wrap:balance!important; } .ke-site .story > .container > .eyebrow{margin-bottom:10px!important;} @media(max-width:600px){ .ke-site .conversation-gateway{padding:22px 18px!important;} .ke-site .gateway-project-chips,.ke-site .gateway-trust-strip{grid-template-columns:1fr!important;} .ke-site .gateway-launch-free{width:100%!important;min-width:0!important;justify-self:stretch!important;} .ke-site .story > .container > h2,.ke-site .services-head h2{font-size:clamp(2rem,9vw,2.9rem)!important;} } @media(orientation:landscape) and (max-height:500px) and (max-width:960px){ .ke-site .story > .container > h2,.ke-site .services-head h2{font-size:clamp(1.9rem,4.6vw,2.65rem)!important;} } /* KechElec — final interaction geometry + RTL deterministic controls */ .ke-site .lang-trigger{ width:100%;min-width:62px;min-height:var(--ke-ui-control-h);padding:0 .7rem;display:flex;align-items:center;justify-content:center;gap:.38rem; border:1px solid var(--ke-ui-glass-line);border-radius:var(--ke-ui-radius-control);background:var(--ke-ui-glass-bg);color:#fff; box-shadow:var(--ke-ui-glass-shadow);backdrop-filter:blur(15px) saturate(135%);-webkit-backdrop-filter:blur(15px) saturate(135%); } .ke-site .lang-trigger b{font-size:.78rem;letter-spacing:.08em;}.ke-site .lang-trigger i{font-style:normal;font-size:.72rem;opacity:.72;} .ke-site .lang-switcher.open .lang-trigger{border-color:rgba(255,107,0,.72);background:var(--ke-ui-glass-bg-hover);} .ke-site .lang-dropdown[hidden]{display:none!important;}.ke-site .lang-dropdown:not([hidden]){display:block!important;} .ke-site.rtl-page .lang-dropdown{inset-inline-start:0!important;inset-inline-end:auto!important;right:auto!important;left:auto!important;} @media(max-width:1049px){.ke-site .lang-trigger{justify-content:space-between!important;height:44px!important;}.ke-site .lang-dropdown{position:static!important;width:100%!important;margin-top:.35rem!important;box-shadow:none!important;}} /* Every interactive layer is clipped to its own radius: no square pressed/focus layer. */ .ke-site :is(button,.btn,.menu,.theme-switch,.lang-trigger,.transformation-tab,.gateway-project-chip,.gateway-launch-free){overflow:hidden;} .ke-site :is(button,.btn)::before,.ke-site :is(button,.btn)::after{border-radius:inherit;} /* Selected controls must be legible at a glance. */ /* PWA message editor owns the remaining interaction height. */ /* Method miniatures keep the photo visible; inactive is not a placeholder. */ .ke-site .method-card picture img{filter:saturate(.92) contrast(1.02) brightness(.88)!important;} .ke-site .method-card::after{background:linear-gradient(180deg,rgba(0,0,0,.02) 5%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.72) 100%)!important;} .ke-site .method-card.active picture img{filter:saturate(1.02) contrast(1.04) brightness(.98)!important;} /* Remaining focal-point corrections from mobile QA: show the gesture/tool before the person. */ @media(max-width:600px){ .ke-site .service:nth-child(1) img{object-position:68% 50%!important;} .ke-site .story-step:nth-of-type(1) img{object-position:78% 50%!important;} .ke-site .method-card:nth-child(1) img,.ke-site #method-panel-0 img{object-position:80% 50%!important;} .ke-site .precision-copy h2{font-size:clamp(1.85rem,8vw,2.65rem)!important;line-height:1.02!important;} } /* Disabled remains identifiable, but unmistakably unavailable. */ .ke-site button:disabled{opacity:.56!important;filter:saturate(.72)!important;border-color:rgba(255,255,255,.13)!important;color:rgba(255,255,255,.62)!important;cursor:not-allowed!important;} /* Radius discipline: 6px compact, 8px standard. */ .ke-site .ke-map-switch.leaflet-control{border-radius:8px!important;}.ke-site .ke-map-switch button{border-radius:6px!important;} /* ========================================================================== KechElec — Last-mile RTL / landscape / Method Carousel lock ========================================================================== */ /* RTL hero: same physical breathing room as LTR. The inline RTL safety block intentionally owns the hero media, but not the content gutter. */ @media(max-width:700px){ .ke-site.rtl-page .hero-v14 .hero-content.container{ width:100%!important; max-width:none!important; padding-block:calc(var(--header) + 3.6rem) 5.1rem!important; padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right))!important; box-sizing:border-box!important; text-align:start!important; } .ke-site.rtl-page .hero-v14 .hero-content :is(.eyebrow,h1,.hero-copy,.actions){ width:100%!important;max-width:100%!important;min-width:0!important; } .ke-site.rtl-page .hero-v14 .hero-content .actions{ margin-inline:0!important;padding-inline:0!important; } .ke-site.rtl-page .hero-v14 .hero-content .actions .btn{ width:100%!important;margin-inline:0!important; } } /* Method navigation cards are always real photo cards. Legacy V2 mobile CSS hid the images; the canonical contract explicitly restores them. */ .ke-site .method-card picture, .ke-site .method-card picture img{ display:block!important; } @media(max-width:600px){ .ke-site .method-cards{ display:grid!important; grid-template-columns:none!important; grid-auto-flow:column!important; grid-auto-columns:minmax(170px,64vw)!important; gap:10px!important; overflow-x:auto!important; overflow-y:hidden!important; scroll-snap-type:inline mandatory!important; scroll-behavior:smooth!important; overscroll-behavior-inline:contain!important; padding:3px 3px 12px!important; } .ke-site .method-card{ display:block!important; min-height:172px!important; padding:0!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:8px!important; overflow:hidden!important; background:#17181f!important; scroll-snap-align:center!important; } .ke-site .method-card picture, .ke-site .method-card picture img{ display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; } .ke-site .method-card picture img{object-fit:cover!important;} .ke-site .method-card::after{ content:""!important;display:block!important;position:absolute!important;inset:0!important; background:linear-gradient(180deg,rgba(0,0,0,.04) 8%,rgba(0,0,0,.20) 48%,rgba(0,0,0,.76) 100%)!important; z-index:0!important; } .ke-site .method-card::before{display:none!important;} .ke-site .method-card .method-no{ position:absolute!important;inset-block-start:14px!important;inset-inline-start:14px!important;z-index:2!important; } .ke-site .method-card-copy{ position:absolute!important;z-index:2!important;inset-inline:14px!important;inset-block-end:14px!important; display:grid!important;gap:3px!important;text-align:start!important; } .ke-site .method-card-copy strong{display:block!important;color:#fff!important;} .ke-site .method-card-copy small{display:block!important;color:rgba(255,255,255,.78)!important;} .ke-site.rtl-page .method-cards{direction:rtl!important;} } /* ========================================================================== KechElec — Pointer focus hygiene Pointer/touch clicks must never leave the orange keyboard halo stuck. Keyboard navigation remains fully visible through :focus-visible. ========================================================================== */ html[data-ke-input-modality="pointer"] body :is(button,a[href],[role="button"],summary):focus-visible{ outline:none!important; outline-offset:0!important; } html[data-ke-input-modality="pointer"] .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-actions button,.geo-confirm-row button,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):focus-visible{ outline:none!important; } /* ========================================================================== KechElec — Landscape Grid Sovereignty Final last-mile lock for public request launcher + PWA presence geometry. ========================================================================== */ /* The public request launcher is always a full-width block. Legacy contact-grid columns must never compress it into the inline-start edge, in LTR or RTL. */ .ke-site .contact-grid{ grid-template-columns:minmax(0,1fr)!important; width:100%!important; min-width:0!important; } .ke-site .conversation-gateway{ box-sizing:border-box!important; } .ke-site :is(.gateway-copy,.gateway-stage,.gateway-launch-stage,.gateway-launch-only,.gateway-project-chips,.gateway-trust-strip){ width:100%!important; min-width:0!important; max-width:none!important; box-sizing:border-box!important; } .ke-site.rtl-page :is(.gateway-copy,.gateway-launch-hint,.gateway-launch-only){ text-align:start!important; } .ke-site.rtl-page .gateway-launch-free{ justify-self:end!important; } /* Phone landscape is not desktop. Keep the launcher readable across the full useful width and choose 4-up or 2x2 instead of squeezing controls. */ @media(orientation:landscape) and (max-height:500px) and (max-width:960px){ .ke-site .contact{padding-block:24px!important;} .ke-site .contact>.container{ width:100%!important; max-width:none!important; padding-inline:var(--ke-ui-gutter)!important; } .ke-site .conversation-gateway{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; gap:10px!important; padding:16px!important; min-height:0!important; height:auto!important; overflow:hidden!important; } .ke-site .gateway-copy{ grid-column:1!important; grid-row:auto!important; padding:0!important; } .ke-site .gateway-copy h2{ width:100%!important; max-width:none!important; margin:.25rem 0 .45rem!important; font-size:clamp(1.65rem,5.2vw,2.35rem)!important; line-height:1.02!important; white-space:normal!important; overflow:visible!important; text-wrap:balance!important; } .ke-site .gateway-copy .power-bridge-copy{ width:100%!important; max-width:72ch!important; margin:0!important; font-size:.86rem!important; line-height:1.35!important; } .ke-site .gateway-launch-only{gap:8px!important;} .ke-site .gateway-launch-hint{ width:100%!important; margin:0!important; font-size:.82rem!important; line-height:1.35!important; } .ke-site .gateway-project-chips{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:7px!important; } .ke-site .gateway-project-chip{ min-width:0!important; width:100%!important; min-height:40px!important; height:auto!important; padding:6px 7px!important; font-size:.68rem!important; line-height:1.12!important; white-space:normal!important; overflow-wrap:anywhere!important; } .ke-site .gateway-launch-free{ width:auto!important; min-width:160px!important; min-height:40px!important; padding-inline:16px!important; } .ke-site .gateway-trust-strip{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:6px!important; } .ke-site .gateway-trust-item{ min-width:0!important; min-height:48px!important; padding:7px 8px!important; } .ke-site .gateway-trust-item strong{font-size:.72rem!important;line-height:1.15!important;} .ke-site .gateway-trust-item small{display:none!important;} } @media(orientation:landscape) and (max-height:500px) and (max-width:680px){ .ke-site .gateway-project-chips, .ke-site .gateway-trust-strip{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* ========================================================================== KechElec — Public Gateway Full-Width Lock Surgical fix: the public request launcher must never inherit the legacy desktop/PWA two-column composition. Applies identically to FR/EN/DA/AR. ========================================================================== */ .ke-site .conversation-gateway{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; width:100%!important; min-width:0!important; max-width:none!important; gap:18px!important; } .ke-site .gateway-copy, .ke-site .gateway-stage, .ke-site .gateway-launch-stage, .ke-site .gateway-launch-only, .ke-site .gateway-trust-strip{ grid-column:1/-1!important; width:100%!important; min-width:0!important; max-width:none!important; box-sizing:border-box!important; } .ke-site .gateway-stage, .ke-site .gateway-launch-stage{ display:block!important; grid-row:auto!important; min-height:0!important; height:auto!important; padding:0!important; } .ke-site .gateway-copy{ grid-row:auto!important; align-self:auto!important; justify-self:stretch!important; padding:0!important; } .ke-site .gateway-launch-only{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px!important; justify-items:stretch!important; } .ke-site .gateway-launch-hint{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } .ke-site .gateway-project-chips{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; width:100%!important; min-width:0!important; gap:10px!important; } .ke-site .gateway-project-chip{ max-width:none!important; justify-content:center!important; overflow-wrap:anywhere!important; } .ke-site .gateway-launch-free{ justify-self:stretch!important; width:100%!important; min-width:0!important; max-width:none!important; } .ke-site .gateway-trust-strip{ position:static!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; padding:0!important; background:transparent!important; border:0!important; } .ke-site .gateway-trust-item{ width:100%!important; } /* RTL changes reading direction only — never geometry or useful width. */ .ke-site.rtl-page .gateway-launch-free, .ke-site[dir="rtl"] .gateway-launch-free, html[dir="rtl"] .ke-site .gateway-launch-free{ justify-self:stretch!important; } @media(max-width:900px){ .ke-site .gateway-project-chips, .ke-site .gateway-trust-strip{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:600px){ .ke-site .gateway-project-chips, .ke-site .gateway-trust-strip{ grid-template-columns:minmax(0,1fr)!important; } } /* current specificity seal: legacy direction-aware desktop rules placed the heading in column 2 and silently recreated an implicit second column. */ html body.ke-site .conversation-gateway > .gateway-copy, html[dir="ltr"] body.ke-site .conversation-gateway > .gateway-copy, html[dir="rtl"] body.ke-site .conversation-gateway > .gateway-copy{ grid-column:1/-1!important; grid-row:auto!important; justify-self:stretch!important; align-self:auto!important; } html body.ke-site .conversation-gateway > .gateway-launch-stage, html body.ke-site .conversation-gateway > .gateway-trust-strip{ grid-column:1/-1!important; grid-row:auto!important; justify-self:stretch!important; } /* Canonical Text Integrity & Action-Group Spacing Lock. This block is intentionally last: once a label fits, later feature releases must not reintroduce clipping through a narrower local rule. */ :root{ --ke-ui-action-group-gap:14px; --ke-ui-button-pad-inline:clamp(10px,1.4vw,18px); } /* Text-bearing controls may grow vertically; icon-only controls remain governed by their dedicated square geometry rules. */ .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.method-card,.geo-actions button,.geo-search button,.geo-confirm-row button,.contact-card button[type="submit"]){ height:auto!important; min-height:var(--ke-ui-control-h-compact)!important; line-height:1.15!important; text-align:center; padding-inline:var(--ke-ui-button-pad-inline)!important; } .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.method-card,.geo-actions button,.geo-search button,.geo-confirm-row button,.contact-card button[type="submit"]) > *{ min-width:0; max-width:100%; } .ke-site .geo-confirm-row button{ min-inline-size:7.5em!important; padding-inline:max(14px,var(--ke-ui-button-pad-inline))!important; justify-content:center!important; text-align:center!important; } /* Structural rhythm between adjacent action groups. */ @media (orientation:landscape) and (max-height:540px) and (max-width:980px){ } /* Active Surface Authority + Phone Country canonical seal. This block is intentionally last in the canonical contract. */ @media(max-width:759px) and (orientation:portrait){ } @media(orientation:landscape) and (max-height:540px) and (max-width:980px){ } /* KechElec — Footer RTL Voice Map Section Polish */ :root{ --ke-orange:#ff6b00;--ke-orange-hi:#ff9b45;--ke-blue:#087cff;--ke-black:#08090c;--ke-cream:#f8f3e7; --ke-font-ui:"Segoe UI Variable","Aptos","Inter","Noto Sans",Arial,sans-serif; --ke-font-display:"Segoe UI Variable Display","Aptos Display","Inter","Noto Sans",Arial,sans-serif; --ke-font-num:"Bahnschrift","Aptos Display","Segoe UI Variable",ui-sans-serif,sans-serif; --ke-r-control:8px;--ke-r-card:10px; --ke-dark-btn:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.015) 43%),linear-gradient(145deg,rgba(31,32,39,.99),rgba(5,6,9,.99)); --ke-dark-btn-hover:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.025) 43%),linear-gradient(145deg,rgba(42,43,51,.99),rgba(7,8,11,.99)); --ke-dark-line:rgba(255,255,255,.2);--ke-dark-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -1px 0 rgba(255,107,0,.23),0 10px 26px rgba(0,0,0,.3); --ke-light-btn:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 43%),linear-gradient(145deg,#ff9c46 0%,#ff740f 44%,#ed5500 100%); --ke-light-btn-hover:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.12) 43%),linear-gradient(145deg,#ffb060 0%,#ff7e1b 45%,#ef5700 100%); --ke-light-line:rgba(112,37,0,.4);--ke-light-shadow:inset 0 1px 0 rgba(255,255,255,.76),inset 0 -1px 0 rgba(103,29,0,.28),0 10px 24px rgba(165,65,0,.2); } html,body,button,input,select,textarea{font-family:var(--ke-font-ui)!important;} .ke-site :is(h1,h2,h3,.method-card-copy strong,.method-detail-copy h3,.testimonial blockquote,.delivery h2,.precision-copy h2,.gateway-copy h2,.service h3){font-family:var(--ke-font-display)!important;font-weight:780!important;letter-spacing:-.035em!important;} .ke-site :is(.method-no,.method-detail-no,.step-no){font-family:var(--ke-font-num)!important;font-variant-numeric:tabular-nums!important;font-weight:360!important;letter-spacing:-.04em!important;} html[dir="rtl"] .ke-site :is(h1,h2,h3,.method-card-copy strong,.method-detail-copy h3,.testimonial blockquote,.delivery h2,.precision-copy h2,.gateway-copy h2,.service h3){font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif!important;letter-spacing:0!important;} /* Approved brand marks */ .brand-logo-theme,.ke-brand-logo-theme{display:block!important;object-fit:cover!important;border-radius:50%!important;box-shadow:0 8px 22px rgba(0,0,0,.22)!important;} .brand-logo-light{display:none!important;}html[data-color-theme="light"] .brand-logo-dark{display:none!important;}html[data-color-theme="light"] .brand-logo-light{display:block!important;} .brand:focus,.brand:focus-visible,.ke-brand:focus,.ke-brand:focus-visible{outline:0!important;box-shadow:none!important;border-color:transparent!important;} /* Two genuinely different themes */ html[data-color-theme="dark"] body{background:#171720!important;color:#f8f3e7!important;} html[data-color-theme="dark"] .ke-site :is(.method-strip,.beforeafter,.contact,#expertises){background:#1d1d27!important;color:#f8f3e7!important;} html[data-color-theme="dark"] .ke-site :is(.conversation-gateway,.contact-card,.geo-picker){background:linear-gradient(145deg,rgba(53,52,65,.96),rgba(28,28,38,.98))!important;color:#f8f3e7!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 22px 52px rgba(0,0,0,.26)!important;} html[data-color-theme="dark"] .ke-site .footer{background:#111216!important;color:#fff!important;} html[data-color-theme="light"] body{background:linear-gradient(180deg,#fbf7ed,#f4eddf)!important;color:#202127!important;} html[data-color-theme="light"] .ke-site :is(.method-strip,.beforeafter,.contact,#expertises){background:linear-gradient(180deg,#fffaf1,#f7efdf)!important;color:#202127!important;} html[data-color-theme="light"] .ke-site :is(.conversation-gateway,.contact-card,.geo-picker){background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,240,225,.95))!important;color:#202127!important;border:1px solid rgba(85,70,52,.13)!important;box-shadow:0 24px 54px rgba(74,57,35,.13),inset 0 1px 0 rgba(255,255,255,.95)!important;} html[data-color-theme="light"] .ke-site .footer{background:linear-gradient(180deg,#f1e6d4,#e6d8c3)!important;color:#202127!important;} html[data-color-theme="light"] .ke-site .footer :is(a,p,.footer-signature){color:#35363c!important;} html[data-color-theme="light"] .ke-site :is(input,select,textarea){background:#fff!important;color:#202127!important;border-color:rgba(70,62,54,.24)!important;} html[data-color-theme="light"] .ke-site :is(input,textarea)::placeholder{color:#777!important;} html[data-color-theme="dark"] .ke-site :is(input,select,textarea){background:rgba(17,18,23,.9)!important;color:#fffaf3!important;border-color:rgba(255,255,255,.18)!important;} /* Global premium button material */ .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top){overflow:hidden!important;position:relative!important;border-radius:var(--ke-r-control)!important;min-height:44px!important;padding-inline:16px!important;font-family:var(--ke-font-ui)!important;font-weight:780!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important;} html[data-color-theme="dark"] .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top){background:var(--ke-dark-btn)!important;color:var(--ke-orange)!important;border:1px solid var(--ke-dark-line)!important;box-shadow:var(--ke-dark-shadow)!important;backdrop-filter:blur(15px) saturate(145%)!important;} html[data-color-theme="light"] .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top){background:var(--ke-light-btn)!important;color:#111216!important;border:1px solid var(--ke-light-line)!important;box-shadow:var(--ke-light-shadow)!important;backdrop-filter:blur(15px) saturate(145%)!important;} html[data-color-theme="dark"] .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):hover{background:var(--ke-dark-btn-hover)!important;border-color:rgba(255,107,0,.62)!important;} html[data-color-theme="light"] .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):hover{background:var(--ke-light-btn-hover)!important;border-color:rgba(90,31,0,.55)!important;} .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):hover{transform:translateY(-1px)!important;}.ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):active{transform:none!important;filter:brightness(.96)!important;border-radius:var(--ke-r-control)!important;} .ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):focus:not(:focus-visible){outline:0!important;}.ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"],.theme-switch,.menu,.lang-trigger,.scroll-top):focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(8,124,255,.25),var(--ke-dark-shadow)!important;} html[data-color-theme="dark"] .ke-site :is(.transformation-tab.active,.btn-primary){color:#fff!important;border-color:var(--ke-orange)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(255,107,0,.52),0 0 0 1px rgba(255,107,0,.25),0 12px 30px rgba(0,0,0,.34)!important;} html[data-color-theme="light"] .ke-site :is(.transformation-tab.active,.btn-primary){color:#0c0d10!important;border-color:#17181c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(90,26,0,.3),0 0 0 2px rgba(20,21,24,.18),0 12px 28px rgba(159,61,0,.25)!important;} /* Trust cards carry the same material */ .ke-site .gateway-trust-item{border-radius:var(--ke-r-control)!important;overflow:hidden!important;min-width:0!important;} html[data-color-theme="dark"] .ke-site .gateway-trust-item{background:var(--ke-dark-btn)!important;border:1px solid var(--ke-dark-line)!important;box-shadow:var(--ke-dark-shadow)!important;color:#fff!important;}html[data-color-theme="dark"] .ke-site .gateway-trust-item strong{color:var(--ke-orange)!important;}html[data-color-theme="dark"] .ke-site .gateway-trust-item small{color:rgba(255,255,255,.68)!important;} html[data-color-theme="light"] .ke-site .gateway-trust-item{background:var(--ke-light-btn)!important;border:1px solid var(--ke-light-line)!important;box-shadow:var(--ke-light-shadow)!important;color:#111!important;}html[data-color-theme="light"] .ke-site .gateway-trust-item :is(strong,small){color:#111!important;} /* Before / After labels = thin version of the same buttons */ .ke-site .compare-label{border-radius:var(--ke-r-control)!important;min-height:30px!important;display:inline-flex!important;align-items:center!important;padding:5px 10px!important;font:780 11px/1 var(--ke-font-ui)!important;backdrop-filter:blur(13px) saturate(145%)!important;} html[data-color-theme="dark"] .ke-site .compare-label{background:var(--ke-dark-btn)!important;color:var(--ke-orange)!important;border:1px solid var(--ke-dark-line)!important;box-shadow:var(--ke-dark-shadow)!important;}html[data-color-theme="light"] .ke-site .compare-label{background:var(--ke-light-btn)!important;color:#111!important;border:1px solid var(--ke-light-line)!important;box-shadow:var(--ke-light-shadow)!important;} /* Map mode selector follows theme */ html[data-color-theme="light"] .ke-site .ke-map-switch.leaflet-control{background:rgba(255,248,238,.92)!important;border-color:rgba(72,59,45,.18)!important;box-shadow:0 8px 20px rgba(78,55,28,.15)!important;}html[data-color-theme="light"] .ke-site .ke-map-switch button{color:#18191e!important;}html[data-color-theme="light"] .ke-site .ke-map-switch button.active{background:linear-gradient(145deg,#ff9b45,#ff6900)!important;color:#111!important;border-color:rgba(117,40,0,.38)!important;} /* Hero navigation: remove arrows, polish dots */ .ke-site .hero-arrow{display:none!important;}.ke-site .hero-controls{gap:0!important;}.ke-site .hero-dots{background:rgba(5,6,9,.34)!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.24)!important;backdrop-filter:blur(13px) saturate(140%)!important;}.ke-site .hero-dot{min-height:0!important;padding:0!important;background:rgba(255,255,255,.28)!important;border:1px solid rgba(255,255,255,.68)!important;box-shadow:none!important;}.ke-site .hero-dot.active{background:linear-gradient(90deg,var(--ke-orange),var(--ke-orange-hi))!important;transform:none!important;} /* Method carousel: photographic cards preserved in both themes */ html[data-color-theme="light"] .ke-site :is(.method-card,.service){background:#111218!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 14px 34px rgba(40,32,22,.18)!important;}html[data-color-theme="light"] .ke-site :is(.method-card-copy strong,.method-card-copy small,.service h3,.service p){color:#fff!important;}.ke-site .method-card{border-radius:var(--ke-r-card)!important;}.ke-site .method-card .method-no{font-family:var(--ke-font-num)!important;font-weight:350!important;}.ke-site .method-card.active{outline:2px solid var(--ke-orange)!important;outline-offset:2px!important;} @media(max-width:600px){.ke-site :is(.btn,.gateway-project-chip,.gateway-launch-free,.transformation-tab,.geo-locate,.geo-search button,.geo-confirm,.contact-card button[type="submit"]){min-height:44px!important;padding-inline:12px!important;}} @media(prefers-reduced-motion:reduce){} /* ========================================================= Footer RTL Voice Map Section Polish One coherent public UI pass: direction, brand, map, voice cue, photographic affordance, watermarks, transformation workspace, carousel visibility, hero progress geometry and sticky themes. ========================================================= */ /* 1. Brand marks: no white square, larger but disciplined hierarchy. */ .ke-site .brand-logo-theme{ background:#0e0f13!important;border:1px solid rgba(255,255,255,.15)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.26)!important; } .ke-site .footer-brand .brand{font-size:1.18rem!important;} .ke-site .footer-brand-copy .footer-brand-lead{font-weight:720;} .ke-site .footer-brand-copy .footer-brand-tags{font-size:.79rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;} html[data-color-theme="dark"] .ke-site .footer-brand-copy{color:rgba(255,255,255,.72);} html[data-color-theme="dark"] .ke-site .footer-brand-copy .footer-brand-tags{color:rgba(255,139,61,.88);} html[data-color-theme="light"] .ke-site .footer-brand-copy{color:#41434a!important;} html[data-color-theme="light"] .ke-site .footer-brand-copy .footer-brand-tags{color:#8b3e12!important;} /* 2. Back-to-top direction contract. The current button material accidentally forced position:relative; this restores a true fixed control. */ .ke-site .scroll-top{ inset-block-end:max(18px,env(safe-area-inset-bottom))!important; border-radius:8px!important; } html[dir="ltr"] .ke-site .scroll-top{inset-inline:auto!important;} html[dir="rtl"] .ke-site .scroll-top{inset-inline:auto!important;} .ke-site .scroll-top.footer-safe{inset-block-end:max(82px,calc(env(safe-area-inset-bottom) + 82px))!important;} /* 3. Sticky header must visually belong to the active theme. */ html[data-color-theme="dark"] .ke-site .header{background:linear-gradient(180deg,rgba(12,13,17,.86),rgba(12,13,17,.58))!important;border-bottom:1px solid rgba(255,255,255,.07)!important;color:#fff!important;} html[data-color-theme="dark"] .ke-site .header.scrolled{background:rgba(14,15,20,.96)!important;border-bottom-color:rgba(255,107,0,.16)!important;box-shadow:0 12px 34px rgba(0,0,0,.3)!important;} html[data-color-theme="light"] .ke-site .header{background:linear-gradient(180deg,rgba(250,245,235,.93),rgba(243,235,223,.84))!important;border-bottom:1px solid rgba(32,33,39,.10)!important;color:#202127!important;} html[data-color-theme="light"] .ke-site .header.scrolled{background:rgba(246,238,225,.975)!important;border-bottom-color:rgba(140,68,25,.16)!important;box-shadow:0 12px 32px rgba(43,37,30,.13)!important;} html[data-color-theme="light"] .ke-site .header :is(.brand,.nav a,.menu,.lang-trigger,.theme-switch){color:#202127!important;} html[data-color-theme="dark"] .ke-site .header :is(.brand,.nav a,.menu,.lang-trigger,.theme-switch){color:#fff!important;} /* 4. Hybrid map: desktop gets real working height, compact devices remain controlled. */ .ke-site .contact-card .geo-map{height:clamp(340px,46vh,520px)!important;min-height:340px!important;} .ke-site .geo-optional{border-radius:8px!important;} /* 5. Voice cue beside the gateway heading. */ .ke-site .gateway-copy{max-width:none!important;} .ke-site .gateway-copy-main{min-width:0;} .ke-site .gateway-voice-cue{align-self:end;justify-self:end;grid-template-columns:58px 1fr;grid-template-rows:auto auto;gap:9px 10px;align-items:center;text-align:start;backdrop-filter:blur(16px) saturate(145%);} .ke-site .gateway-voice-cue::after{top:-30%;bottom:-30%;width:42%;left:-55%;transform:skewX(-16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);} @keyframes keVoiceSweep{0%,64%{left:-55%;opacity:0}72%{opacity:.9}92%{left:125%;opacity:.25}100%{left:125%;opacity:0}} .ke-site .gateway-voice-avatar{overflow:hidden;} .ke-site .gateway-voice-copy{gap:2px;min-width:0;}.ke-site .gateway-voice-copy small{font-size:.68rem;line-height:1.2;color:rgba(255,255,255,.64);} .ke-site .gateway-voice-wave{display:flex;gap:3px;align-items:center;}.ke-site .gateway-voice-wave i{display:block;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--ke-orange-hi),var(--ke-orange));animation:keVoiceBar 1.05s ease-in-out infinite;}.ke-site .gateway-voice-wave i:nth-child(1){height:7px;}.ke-site .gateway-voice-wave i:nth-child(2){height:14px;animation-delay:.14s;}.ke-site .gateway-voice-wave i:nth-child(3){height:10px;animation-delay:.28s;}.ke-site .gateway-voice-wave i:nth-child(4){height:16px;animation-delay:.42s;} @keyframes keVoiceBar{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1);opacity:1}} html[data-color-theme="light"] .ke-site .gateway-voice-copy :is(strong,small){color:#111216!important;} html[dir="rtl"] .ke-site .gateway-voice-cue{justify-self:start;text-align:right;} /* 6. WhatsApp submit: recognizable first, compact second. */ .ke-site .contact-card .whatsapp-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:100%!important;} .ke-site .whatsapp-submit .wa-mark{display:grid;place-items:center;border-radius:50%;background:#1faa59;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 10px rgba(0,0,0,.18);} .ke-site .whatsapp-submit .wa-mark svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;} /* 7. Photographic affordance: a subtle hover zoom on editorial images. */ .ke-site :is(.delivery,.precision-wrap,.story-image,.service,.method-detail-media){overflow:hidden!important;} .ke-site :is(.delivery>img,.precision-image img,.story-image img,.service img,.method-detail-media img){transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .45s ease!important;transform:scale(1.001);} @media(hover:hover) and (pointer:fine){ .ke-site .delivery:hover>img,.ke-site .precision-wrap:hover .precision-image img,.ke-site .story-step:hover .story-image img,.ke-site .service:hover img,.ke-site .method-detail:hover .method-detail-media img{transform:scale(1.035)!important;filter:contrast(1.025) saturate(1.025);} } /* 8. Full-width métier watermarks, monochrome only. */ .ke-site .intro::before{inset-block:-2.6rem;left:50%;transform:translateX(-50%);} html[data-color-theme="light"] .ke-site .intro::before,html[data-color-theme="light"] .ke-site .testimonial::before{background:#15161b;} html[data-color-theme="dark"] .ke-site .intro::before,html[data-color-theme="dark"] .ke-site .testimonial::before{background:#fff;} /* 9. Before/After becomes an explicit work surface. */ html[data-color-theme="dark"] .ke-site .beforeafter>.container{background:linear-gradient(145deg,rgba(15,16,21,.92),rgba(28,29,37,.96))!important;} html[data-color-theme="light"] .ke-site .beforeafter>.container{background:linear-gradient(145deg,#eee3d1,#e6d7c1)!important;border-color:rgba(60,48,37,.12)!important;box-shadow:0 22px 50px rgba(74,57,35,.12)!important;} .ke-site .transformation-tabs{margin-block:1.65rem 1rem!important;} .ke-site .transformation-stage{padding:8px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.09)!important;background:rgba(0,0,0,.10)!important;} html[data-color-theme="light"] .ke-site .transformation-stage{border-color:rgba(42,36,31,.10)!important;background:rgba(112,83,52,.06)!important;} .ke-site .transformation-compare{border-radius:8px!important;} .ke-site .transformation-compare .compare-line{width:3px!important;background:linear-gradient(#0b0c0f 0 28%,var(--ke-orange) 28% 72%,#0b0c0f 72% 100%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.15)!important;} .ke-site .transformation-compare .compare-line::after{content:"← →"!important;width:66px!important;height:38px!important;border-radius:8px!important;background:linear-gradient(180deg,var(--ke-orange-hi),var(--ke-orange))!important;color:#0a0b0e!important;border:1px solid rgba(30,12,0,.62)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px rgba(0,0,0,.25)!important;font:900 15px/1 var(--ke-font-ui)!important;letter-spacing:.08em!important;} /* 10. Hero progress control: rectilinear métier geometry, no pill. */ .ke-site .hero-dots{padding:6px 8px!important;gap:7px!important;border-radius:8px!important;} .ke-site .hero-dot{width:9px!important;height:9px!important;border-radius:3px!important;} .ke-site .hero-dot.active{width:22px!important;border-radius:4px!important;} /* 11. Footer signature contrast is explicit in both themes. */ html[data-color-theme="light"] .ke-site .footer-signature,html[data-color-theme="light"] .ke-site .footer-signature *{color:#35363c!important;} html[data-color-theme="light"] .ke-site .footer-signature .ws-mark{color:#1f2026!important;} html[data-color-theme="dark"] .ke-site .footer-signature{color:rgba(255,255,255,.62)!important;} html[data-color-theme="dark"] .ke-site .footer-signature .ws-mark{color:rgba(255,255,255,.9)!important;} /* 12. Responsive lock: phone portrait, phone landscape, tablet, desktop. */ @media(max-width:900px){ .ke-site .gateway-voice-cue{grid-template-columns:50px 1fr;padding:10px;}.ke-site .gateway-voice-avatar{width:50px;height:50px;} .ke-site .contact-card .geo-map{height:clamp(300px,42vh,410px)!important;min-height:300px!important;} } @media(max-width:600px){ .ke-site .footer-brand .brand{font-size:1rem!important;}.ke-site .footer-brand-copy .footer-brand-tags{font-size:.69rem;letter-spacing:.035em;} .ke-site .gateway-voice-cue{grid-template-columns:48px 1fr!important;grid-template-rows:auto auto!important;}.ke-site .gateway-voice-avatar{width:48px;height:48px;}.ke-site .gateway-voice-copy small{font-size:.64rem;} .ke-site .beforeafter>.container{padding:16px!important;border-radius:8px!important;}.ke-site .transformation-stage{padding:5px!important;border-radius:8px!important;}.ke-site .transformation-compare .compare-line::after{width:58px!important;height:36px!important;} .ke-site .hero-dots{border-radius:7px!important;} .ke-site .scroll-top{inset-block-end:max(14px,env(safe-area-inset-bottom))!important;} } @media(orientation:landscape) and (max-height:520px){ .ke-site .contact-card .geo-map{height:min(58vh,270px)!important;min-height:220px!important;} .ke-site .gateway-voice-cue{grid-template-columns:44px 1fr!important;padding:9px;}.ke-site .gateway-voice-avatar{width:44px;height:44px;} .ke-site .footer .brand-logo-theme{width:72px!important;height:72px!important;flex-basis:72px!important;} } @media(min-width:1400px){.ke-site .contact-card .geo-map{height:500px!important;}} @media(prefers-reduced-motion:reduce){ .ke-site .gateway-voice-cue::after,.ke-site .gateway-voice-wave i{animation:none!important;} .ke-site :is(.delivery>img,.precision-image img,.story-image img,.service img,.method-detail-media img){transition:none!important;transform:none!important;} } /* ========================================================== KechElec — Runtime & Brand Polish Lock ========================================================== */ /* Brand wordmark hierarchy */ .ke-site .brand{align-items:center!important;gap:10px!important;} .ke-site .brand-wordmark{display:grid!important;align-content:center!important;gap:1px!important;min-width:0!important;line-height:1!important;} .ke-site .brand-name{display:block!important;font-family:var(--ke-font-display)!important;font-weight:820!important;letter-spacing:-.025em!important;line-height:1!important;} .ke-site .brand-tagline{display:block!important;font-family:var(--ke-font-ui)!important;font-weight:850!important;line-height:1.05!important;letter-spacing:.055em!important;white-space:nowrap!important;text-transform:uppercase!important;} html[data-color-theme="dark"] .ke-site .brand-tagline{color:var(--ke-orange)!important;} html[data-color-theme="light"] .ke-site .brand-tagline{color:var(--ke-blue)!important;} .ke-site .header .brand-logo-theme{width:58px!important;height:58px!important;flex:0 0 58px!important;} .ke-site .header .brand-name{font-size:1.05rem!important;color:inherit!important;} .ke-site .header .brand-tagline{font-size:.52rem!important;} .ke-site .footer .brand-logo-theme{width:110px!important;height:110px!important;flex:0 0 110px!important;} .ke-site .footer-brand .brand{gap:16px!important;align-items:center!important;} .ke-site .footer .brand-name{font-size:1.72rem!important;} .ke-site .footer .brand-tagline{font-size:.69rem!important;letter-spacing:.035em!important;} .ke-site .footer-brand-copy{margin-top:16px!important;display:grid!important;gap:7px!important;max-width:430px!important;font-size:.96rem!important;line-height:1.45!important;} .ke-site .footer-brand-lead{font-weight:760!important;} html[data-color-theme="light"] .ke-site .footer-group>strong{color:#24262c!important;} html[data-color-theme="light"] .ke-site .footer-group a{color:#4f5056!important;} /* Brand watermark: two-tone K + bolt, no decorative circuit card. */ .ke-site .intro,.ke-site .testimonial{position:relative!important;isolation:isolate!important;overflow:hidden!important;} .ke-site .intro::before,.ke-site .testimonial::before{content:""!important;position:absolute!important;pointer-events:none!important;z-index:0!important;background:none!important;-webkit-mask:none!important;mask:none!important;transform:none!important;opacity:.085!important;background-image:url("/assets/images/brand/electricienpro-mark.webp?v=2.1.1-r11-r8-r8-r3-r2-branding-r1")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:min(520px,42vw) auto!important;} .ke-site .intro::before{inset:-6% -2%!important;width:auto!important;} .ke-site .testimonial::before{inset:0!important;} html[data-color-theme="light"] .ke-site .intro::before,html[data-color-theme="light"] .ke-site .testimonial::before{background-image:url("/assets/images/brand/electricienpro-mark.webp?v=2.1.1-r11-r8-r8-r3-r2-branding-r1")!important;opacity:.08!important;} html[data-color-theme="dark"] .ke-site .intro::before,html[data-color-theme="dark"] .ke-site .testimonial::before{opacity:.075!important;} .ke-site .intro>* , .ke-site .testimonial>.container{position:relative!important;z-index:1!important;} /* Before/after: editorial heading stays outside the work surface. */ .ke-site .beforeafter>.container{padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;} .ke-site .transformation-workspace{margin-top:clamp(28px,4vw,48px)!important;padding:clamp(18px,2.7vw,30px)!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 52px rgba(0,0,0,.16)!important;} html[data-color-theme="dark"] .ke-site .transformation-workspace{background:linear-gradient(145deg,rgba(15,16,21,.92),rgba(28,29,37,.96))!important;} html[data-color-theme="light"] .ke-site .transformation-workspace{background:linear-gradient(145deg,#eee3d1,#e6d7c1)!important;border-color:rgba(60,48,37,.12)!important;box-shadow:0 22px 50px rgba(74,57,35,.12)!important;} .ke-site .transformation-tabs{margin:0 0 18px!important;} /* Vocal cue: avatar is the surface, no opaque mini-card behind it. */ .ke-site .gateway-copy{grid-template-columns:minmax(0,1fr) 176px!important;gap:28px!important;align-items:center!important;} .ke-site .gateway-voice-cue{position:relative!important;width:176px!important;height:176px!important;min-height:176px!important;padding:0!important;display:block!important;overflow:hidden!important;border-radius:10px!important;background:transparent!important;border:1px solid rgba(255,107,0,.34)!important;box-shadow:0 16px 36px rgba(0,0,0,.22)!important;isolation:isolate!important;} .ke-site .gateway-voice-cue::before{content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(180deg,transparent 34%,rgba(6,7,10,.16) 52%,rgba(6,7,10,.93) 100%)!important;pointer-events:none!important;} .ke-site .gateway-voice-cue::after{content:""!important;position:absolute!important;inset:0!important;z-index:3!important;border-radius:inherit!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(255,107,0,.28)!important;pointer-events:none!important;animation:keVoiceGlow 3.6s ease-in-out infinite!important;} @keyframes keVoiceGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,107,0,.22),0 0 0 rgba(255,107,0,0)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,107,0,.36),0 0 24px rgba(255,107,0,.10)}} .ke-site .gateway-voice-avatar{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;grid-row:auto!important;z-index:0!important;} .ke-site .gateway-voice-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 32%!important;filter:saturate(.98) contrast(1.01)!important;} .ke-site .gateway-voice-copy{position:absolute!important;left:14px!important;right:14px!important;bottom:13px!important;z-index:2!important;display:block!important;} .ke-site .gateway-voice-copy strong{display:block!important;color:#fff!important;font-size:.94rem!important;line-height:1!important;white-space:nowrap!important;text-shadow:0 1px 4px rgba(0,0,0,.75)!important;} .ke-site .gateway-voice-wave{position:absolute!important;left:14px!important;bottom:40px!important;z-index:2!important;height:20px!important;} html[dir="rtl"] .ke-site .gateway-voice-copy{left:14px!important;right:14px!important;text-align:right!important;} html[dir="rtl"] .ke-site .gateway-voice-wave{left:auto!important;right:14px!important;} html[data-color-theme="light"] .ke-site .gateway-voice-cue{background:transparent!important;border-color:rgba(8,124,255,.34)!important;box-shadow:0 16px 34px rgba(66,48,29,.16)!important;} html[data-color-theme="light"] .ke-site .gateway-voice-copy strong{color:#fff!important;} /* Light-theme geo/footer contrast lock. */ html[data-color-theme="light"] .ke-site :is(.geo-picker,.geo-picker p,.geo-picker small,.geo-status,.geo-attribution,.geo-hint){color:#4b4c52!important;} html[data-color-theme="light"] .ke-site .geo-picker :is(h2,h3,strong,label){color:#23242a!important;} html[data-color-theme="light"] .ke-site .geo-confirm:disabled{color:#5e5146!important;opacity:.72!important;} /* Scroll-to-top: physical coordinates only; never mix logical and physical inset. */ .ke-site .scroll-top{position:fixed!important;z-index:1400!important;top:auto!important;bottom:max(14px,env(safe-area-inset-bottom))!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;display:grid!important;place-items:center!important;} html[dir="ltr"] .ke-site .scroll-top{left:auto!important;right:14px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;} html[dir="rtl"] .ke-site .scroll-top{right:auto!important;left:14px!important;inset-inline-start:auto!important;inset-inline-end:auto!important;} /* Runtime method state has a subtle progress cue without stopping on hover. */ .ke-site .method-strip.autoplaying .method-card.active{border-color:var(--ke-orange)!important;box-shadow:0 0 0 1px rgba(255,107,0,.22),0 12px 28px rgba(0,0,0,.18)!important;} @media(max-width:900px){ .ke-site .header .brand-logo-theme{width:50px!important;height:50px!important;flex-basis:50px!important;} .ke-site .header .brand-name{font-size:.95rem!important;}.ke-site .header .brand-tagline{font-size:.46rem!important;} .ke-site .footer .brand-logo-theme{width:92px!important;height:92px!important;flex-basis:92px!important;} .ke-site .footer .brand-name{font-size:1.45rem!important;}.ke-site .footer .brand-tagline{font-size:.61rem!important;} .ke-site .gateway-copy{grid-template-columns:minmax(0,1fr) 150px!important;gap:18px!important;} .ke-site .gateway-voice-cue{width:150px!important;height:150px!important;min-height:150px!important;} } @media(max-width:600px){ .ke-site .header .brand-logo-theme{width:46px!important;height:46px!important;flex-basis:46px!important;} .ke-site .header .brand{gap:7px!important;}.ke-site .header .brand-name{font-size:.88rem!important;}.ke-site .header .brand-tagline{font-size:.39rem!important;letter-spacing:.025em!important;} .ke-site .footer .brand-logo-theme{width:82px!important;height:82px!important;flex-basis:82px!important;} .ke-site .footer-brand .brand{gap:11px!important;}.ke-site .footer .brand-name{font-size:1.25rem!important;}.ke-site .footer .brand-tagline{font-size:.54rem!important;letter-spacing:.022em!important;} .ke-site .footer-brand-copy{margin-top:12px!important;font-size:.83rem!important;line-height:1.43!important;} .ke-site .gateway-copy{grid-template-columns:1fr!important;gap:14px!important;} .ke-site .gateway-voice-cue{justify-self:end!important;width:128px!important;height:128px!important;min-height:128px!important;} html[dir="rtl"] .ke-site .gateway-voice-cue{justify-self:start!important;} .ke-site .transformation-workspace{padding:14px!important;border-radius:8px!important;margin-top:22px!important;} .ke-site .scroll-top{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;bottom:max(14px,env(safe-area-inset-bottom))!important;} } @media(orientation:landscape) and (max-height:520px){ .ke-site .header .brand-tagline{font-size:.4rem!important;} .ke-site .gateway-copy{grid-template-columns:minmax(0,1fr) 124px!important;}.ke-site .gateway-voice-cue{width:124px!important;height:124px!important;min-height:124px!important;} } @media(prefers-reduced-motion:reduce){.ke-site .gateway-voice-cue::after{animation:none!important;}} /* current final physical/logical edge lock — high specificity beats the global button material. */ html body.ke-site button.scroll-top[data-scroll-top]{ position:fixed!important; z-index:1400!important; top:auto!important; left:auto!important; right:auto!important; bottom:max(14px,env(safe-area-inset-bottom))!important; inset-inline-start:auto!important; inset-inline-end:max(14px,env(safe-area-inset-right))!important; inset-block-start:auto!important; inset-block-end:max(14px,env(safe-area-inset-bottom))!important; } html[dir="rtl"] body.ke-site button.scroll-top[data-scroll-top]{ left:auto!important; right:auto!important; inset-inline-start:auto!important; inset-inline-end:max(14px,env(safe-area-inset-left))!important; } /* Public label integrity seal. Loaded after the canonical contract, therefore this broad guard keeps legacy feature CSS from forcing nowrap. */ .ke-site :is(button,.btn,a.btn,[role="button"]){ box-sizing:border-box!important; min-inline-size:0; max-inline-size:100%; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; } /* KechElec — Mobile Precision Lock Scope: mobile cognitive hierarchy, map width, one-scroll rails, CTA consistency. */ :root{ --ke219-control-h:52px; --ke219-mobile-gutter:12px; --ke219-info-line:rgba(255,107,0,.28); } /* -------------------------------------------------------------------------- Hard QA contract: controls of the same level share geometry and icon logic. -------------------------------------------------------------------------- */ .ke-site .gateway-project-chip{ width:100%!important; min-width:0!important; min-height:var(--ke219-control-h)!important; height:var(--ke219-control-h)!important; padding:0 12px!important; display:grid!important; grid-template-columns:30px minmax(0,1fr) 30px!important; align-items:center!important; justify-items:center!important; gap:6px!important; text-align:center!important; line-height:1.15!important; font-size:.86rem!important; white-space:normal!important; } .ke-site .gateway-project-chip::before, .ke-site .gateway-project-chip::after{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;} .ke-site .gateway-project-chip::after{content:""!important;} .ke-site .gateway-project-chip:nth-child(1)::before{content:"⚡"!important;} .ke-site .gateway-project-chip:nth-child(2)::before{content:"⏻"!important;} .ke-site .gateway-project-chip:nth-child(3)::before{content:"◉"!important;} .ke-site .gateway-project-chip:nth-child(4)::before{content:"＋"!important;} .ke-site .gateway-project-chip::before{ font-family:var(--ke-font-ui)!important; font-size:1rem!important; line-height:1!important; border:1px solid rgba(255,107,0,.34)!important; border-radius:6px!important; background:rgba(255,107,0,.06)!important; color:var(--ke-orange)!important; } .ke-site .gateway-project-label{grid-column:2!important;min-width:0!important;font-weight:800!important;} html[data-color-theme="light"] .ke-site .gateway-project-chip::before{color:#111216!important;border-color:rgba(54,32,17,.28)!important;background:rgba(255,255,255,.30)!important;} /* -------------------------------------------------------------------------- Gateway: editorial copy is free; only the interaction surface is a card. -------------------------------------------------------------------------- */ html body.ke-site .conversation-gateway{ padding:0!important; min-height:0!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px!important; } .ke-site .gateway-copy{ display:block!important; padding-inline:clamp(2px,1vw,8px)!important; } .ke-site .gateway-copy-main{max-width:78ch!important;} .ke-site .gateway-interaction-surface{ display:grid!important; grid-template-columns:190px minmax(0,1fr)!important; grid-template-areas:"voice launch" "trust trust"!important; gap:16px 20px!important; align-items:stretch!important; padding:clamp(16px,2.2vw,24px)!important; border-radius:10px!important; border:1px solid rgba(255,255,255,.11)!important; box-shadow:0 20px 46px rgba(0,0,0,.20)!important; overflow:hidden!important; } html[data-color-theme="dark"] .ke-site .gateway-interaction-surface{background:linear-gradient(145deg,rgba(33,34,43,.96),rgba(17,18,24,.98))!important;} html[data-color-theme="light"] .ke-site .gateway-interaction-surface{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,229,210,.96))!important;border-color:rgba(73,58,42,.13)!important;box-shadow:0 20px 42px rgba(72,54,34,.12)!important;} .ke-site .gateway-interaction-surface>.gateway-voice-cue{grid-area:voice!important;} .ke-site .gateway-interaction-surface>.gateway-launch-stage{grid-area:launch!important;} .ke-site .gateway-interaction-surface>.gateway-trust-strip{grid-area:trust!important;} /* Avatar is a real CTA, not decoration. */ html body.ke-site button.gateway-voice-cue{ appearance:none!important; -webkit-appearance:none!important; width:190px!important; height:190px!important; min-width:190px!important; min-height:190px!important; aspect-ratio:1/1!important; padding:0!important; margin:0!important; border-radius:10px!important; cursor:pointer!important; justify-self:center!important; align-self:start!important; text-align:start!important; } html body.ke-site button.gateway-voice-cue:hover{transform:translateY(-2px)!important;box-shadow:0 20px 42px rgba(0,0,0,.28),0 0 0 1px rgba(255,107,0,.22)!important;} html body.ke-site button.gateway-voice-cue:focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(8,124,255,.28),0 18px 38px rgba(0,0,0,.24)!important;} /* Premium free-description doorway: clearly distinct from preset controls. */ html body.ke-site button.gateway-launch-free{ position:relative!important; isolation:isolate!important; width:100%!important; min-height:64px!important; height:auto!important; padding:8px 12px!important; display:grid!important; grid-template-columns:38px minmax(0,1fr) 28px!important; gap:10px!important; align-items:center!important; text-align:start!important; overflow:hidden!important; border-radius:8px!important; } html[data-color-theme="dark"] body.ke-site button.gateway-launch-free{ background:linear-gradient(118deg,rgba(255,107,0,.22),rgba(19,20,27,.98) 34%,rgba(7,124,255,.12) 100%)!important; color:#fff!important; border-color:rgba(255,107,0,.58)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 32px rgba(0,0,0,.28)!important; } html[data-color-theme="light"] body.ke-site button.gateway-launch-free{ background:linear-gradient(118deg,#ff7a18,#ff9b45 46%,#f5e3ca 100%)!important; color:#111216!important; border-color:rgba(75,35,10,.34)!important; } .ke-site .gateway-launch-free::before{ content:""!important; position:absolute!important; z-index:-1!important; inset:-80% auto -80% -35%!important; width:22%!important; transform:skewX(-18deg)!important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)!important; animation:ke219FreeSweep 5.2s ease-in-out infinite!important; } @keyframes ke219FreeSweep{0%,68%{left:-35%;opacity:0}74%{opacity:1}92%,100%{left:125%;opacity:0}} .ke-site .gateway-free-icon{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;border-radius:7px!important;border:1px solid currentColor!important;font-size:.92rem!important;} .ke-site .gateway-free-copy{display:grid!important;gap:2px!important;min-width:0!important;} .ke-site .gateway-free-copy strong{font-size:.9rem!important;line-height:1.1!important;} .ke-site .gateway-free-copy small{font-size:.68rem!important;line-height:1.15!important;opacity:.68!important;font-weight:650!important;} .ke-site .gateway-free-arrow{font-size:1.25rem!important;line-height:1!important;justify-self:end!important;} html[dir="rtl"] .ke-site .gateway-free-arrow{transform:scaleX(-1)!important;justify-self:start!important;} /* Benefits are information, never fake buttons. */ html body.ke-site .gateway-trust-strip{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;} html body.ke-site .gateway-trust-item{ min-width:0!important; display:grid!important; gap:8px!important; border:0!important; border-inline-start:2px solid var(--ke219-info-line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; color:inherit!important; } .ke-site .gateway-trust-icon{width:22px!important;height:22px!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,107,0,.28)!important;border-radius:5px!important;color:var(--ke-orange)!important;font-size:.7rem!important;} .ke-site .gateway-trust-item>span:last-child{min-width:0!important;display:grid!important;gap:2px!important;} .ke-site .gateway-trust-item strong{font-size:.78rem!important;line-height:1.15!important;color:inherit!important;white-space:normal!important;} .ke-site .gateway-trust-item small{font-size:.66rem!important;line-height:1.22!important;color:inherit!important;opacity:.58!important;white-space:normal!important;} /* -------------------------------------------------------------------------- Geo: one work surface, maximum useful width, quiet technical metadata. -------------------------------------------------------------------------- */ html body.ke-site .contact-card .geo-picker{ padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; } .ke-site .geo-picker-head{display:block!important;margin:0 0 14px!important;padding:0 2px!important;} .ke-site .geo-kicker{display:block!important;margin-bottom:5px!important;font-size:.64rem!important;letter-spacing:.14em!important;} .ke-site .geo-actions{margin-bottom:12px!important;} .ke-site .geo-status:empty{display:none!important;} .ke-site .geo-status{margin:0 0 7px!important;min-height:0!important;font-size:.74rem!important;} .ke-site .geo-map-surface{ width:100%!important; min-width:0!important; padding:10px!important; border-radius:10px!important; border:1px solid rgba(255,255,255,.10)!important; overflow:hidden!important; } html[data-color-theme="dark"] .ke-site .geo-map-surface{background:linear-gradient(145deg,rgba(20,21,28,.96),rgba(32,32,42,.92))!important;box-shadow:0 18px 40px rgba(0,0,0,.18)!important;} html[data-color-theme="light"] .ke-site .geo-map-surface{background:linear-gradient(145deg,#f0e6d7,#e7d8c3)!important;border-color:rgba(69,54,39,.13)!important;box-shadow:0 18px 36px rgba(72,54,34,.10)!important;} .ke-site .geo-map-surface .geo-map{width:100%!important;max-width:none!important;margin:0!important;} .ke-site .geo-address strong:empty{display:none!important;} .ke-site .geo-address:has(strong:empty) span:empty{display:none!important;} .ke-site .geo-attribution{ margin-top:6px!important; font-size:.56rem!important; line-height:1.25!important; opacity:.42!important; color:inherit!important; text-align:end!important; font-weight:500!important; } .ke-site .geo-confirm-row{margin-top:8px!important;gap:8px!important;} .ke-site .geo-address small{font-size:.72rem!important;opacity:.62!important;} /* WhatsApp mark must be recognizable at first glance. */ .ke-site .whatsapp-submit .wa-mark{width:31px!important;height:31px!important;flex:0 0 31px!important;} .ke-site .whatsapp-submit .wa-mark svg{width:19px!important;height:19px!important;stroke-width:2.15!important;} .ke-site .contact-card .whatsapp-submit{gap:.7rem!important;} /* Before/after heading follows the same editorial gutter as every other section. */ .ke-site .beforeafter .transformations-heading{padding-inline:var(--ke-ui-gutter)!important;} .ke-site .beforeafter .transformation-workspace{margin-inline:var(--ke-ui-gutter)!important;} /* Method rail has one scroll gesture and zero redundant native scrollbar. */ @media(max-width:600px){ .ke-site .method-cards{ scrollbar-width:none!important; -ms-overflow-style:none!important; padding-bottom:3px!important; } .ke-site .method-cards::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;} } /* -------------------------------------------------------------------------- Phone portrait: maximize useful width and compress hierarchy, not content. -------------------------------------------------------------------------- */ @media(max-width:600px){ :root{--ke219-control-h:52px;--ke219-mobile-gutter:10px;} .ke-site .contact{padding-block:28px!important;} .ke-site .contact>.container{ width:100%!important; max-width:none!important; padding-inline:8px!important; } .ke-site .contact-grid{gap:20px!important;} .ke-site .contact-card{padding:12px!important;border-radius:8px!important;} .ke-site .conversation-gateway{gap:14px!important;} .ke-site .gateway-copy{padding-inline:6px!important;} .ke-site .gateway-copy h2{font-size:clamp(2rem,10vw,2.65rem)!important;line-height:1.02!important;margin:.3rem 0 .55rem!important;} .ke-site .gateway-copy .power-bridge-copy{font-size:.92rem!important;line-height:1.4!important;margin:0!important;} .ke-site .gateway-interaction-surface{ grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"voice" "launch" "trust"!important; gap:13px!important; padding:14px!important; border-radius:8px!important; } html body.ke-site button.gateway-voice-cue{ height:auto!important; min-width:0!important; min-height:0!important; aspect-ratio:1/1!important; justify-self:center!important; } .ke-site .gateway-voice-copy{left:13px!important;right:13px!important;bottom:13px!important;} .ke-site .gateway-voice-copy strong{font-size:1rem!important;} .ke-site .gateway-voice-wave{left:13px!important;bottom:42px!important;} html[dir="rtl"] .ke-site .gateway-voice-wave{left:auto!important;right:13px!important;} .ke-site .gateway-launch-only{gap:9px!important;} .ke-site .gateway-launch-hint{font-size:.86rem!important;line-height:1.35!important;margin:0 0 2px!important;} html body.ke-site .gateway-project-chips{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;} .ke-site .gateway-project-chip{font-size:.85rem!important;} .ke-site .gateway-free-copy strong{font-size:.88rem!important;} .ke-site .gateway-free-copy small{font-size:.65rem!important;} .ke-site .gateway-trust-icon{width:20px!important;height:20px!important;font-size:.62rem!important;} .ke-site .gateway-trust-item strong{font-size:.69rem!important;} .ke-site .gateway-trust-item small{font-size:.60rem!important;} .ke-site .contact-card .geo-picker{margin:16px 0!important;} .ke-site .geo-picker-head{padding-inline:2px!important;margin-bottom:10px!important;} .ke-site .geo-picker-head h3{font-size:1.28rem!important;margin:.1rem 0 .25rem!important;} .ke-site .geo-picker-head p{font-size:.82rem!important;line-height:1.35!important;} .ke-site .geo-actions{gap:8px!important;margin-bottom:9px!important;} .ke-site .geo-search{grid-template-columns:1fr!important;gap:8px!important;} .ke-site .geo-map-surface{width:calc(100% + 8px)!important;margin-inline:-4px!important;padding:6px!important;border-radius:8px!important;} .ke-site .contact-card .geo-map{height:260px!important;min-height:260px!important;border-radius:7px!important;} .ke-site .geo-confirm-row{grid-template-columns:1fr!important;} .ke-site .geo-attribution{font-size:.52rem!important;opacity:.34!important;text-align:center!important;} .ke-site .beforeafter .transformations-heading{padding-inline:18px!important;} .ke-site .beforeafter .transformation-workspace{margin:18px 8px 0!important;padding:12px!important;} .ke-site .transformations-heading{grid-template-columns:1fr!important;gap:12px!important;} .ke-site .transformations-heading h2{font-size:clamp(2rem,9.6vw,2.8rem)!important;line-height:1.04!important;} .ke-site .transformations-heading>p{font-size:.9rem!important;line-height:1.45!important;} .ke-site .transformation-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;margin:0 0 10px!important;} .ke-site .transformation-tab{width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0 8px!important;font-size:.78rem!important;} } /* Tiny phones: keep the 2x2 trust information readable, not button-like. */ @media(max-width:370px){ .ke-site .gateway-interaction-surface{padding:12px!important;} html body.ke-site button.gateway-voice-cue{width:min(196px,70vw)!important;} .ke-site .gateway-project-chip{height:50px!important;min-height:50px!important;font-size:.81rem!important;} .ke-site .gateway-trust-item strong{font-size:.66rem!important;} .ke-site .gateway-trust-item small{display:none!important;} } /* Landscape phones: compact but identical cognitive hierarchy. */ @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ .ke-site .gateway-interaction-surface{ grid-template-columns:132px minmax(0,1fr)!important; grid-template-areas:"voice launch" "trust trust"!important; gap:10px 14px!important; padding:12px!important; } .ke-site .gateway-project-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;} .ke-site .gateway-project-chip{height:42px!important;min-height:42px!important;font-size:.7rem!important;grid-template-columns:24px minmax(0,1fr) 24px!important;} .ke-site .gateway-project-chip::before,.ke-site .gateway-project-chip::after{width:20px!important;height:20px!important;font-size:.72rem!important;} html body.ke-site button.gateway-launch-free{padding-block:5px!important;} .ke-site .gateway-trust-item small{display:none!important;} .ke-site .contact-card .geo-picker{margin-block:10px!important;} .ke-site .geo-actions{grid-template-columns:auto minmax(0,1fr)!important;} .ke-site .geo-search{grid-template-columns:minmax(0,1fr) auto!important;} .ke-site .contact-card .geo-map{height:230px!important;min-height:220px!important;} } @media(prefers-reduced-motion:reduce){ .ke-site .gateway-launch-free::before{animation:none!important;} } /* Specificity seals against V218 theme material. */ html[data-color-theme="dark"] body.ke-site .conversation-gateway, html[data-color-theme="light"] body.ke-site .conversation-gateway{ background:transparent!important;border:0!important;box-shadow:none!important; } html[data-color-theme="dark"] body.ke-site .gateway-trust-item, html[data-color-theme="light"] body.ke-site .gateway-trust-item{ background:transparent!important;border:0!important;border-inline-start:2px solid var(--ke219-info-line)!important; border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;color:inherit!important; } html[data-color-theme="dark"] body.ke-site .gateway-trust-item strong, html[data-color-theme="light"] body.ke-site .gateway-trust-item strong{color:inherit!important;} html[data-color-theme="dark"] body.ke-site .gateway-trust-item small, html[data-color-theme="light"] body.ke-site .gateway-trust-item small{color:inherit!important;} html[data-color-theme="dark"] body.ke-site .contact-card .geo-picker, html[data-color-theme="light"] body.ke-site .contact-card .geo-picker{ background:transparent!important;border:0!important;box-shadow:none!important; } html[data-color-theme="dark"] body.ke-site .beforeafter, html[data-color-theme="light"] body.ke-site .beforeafter{background:transparent!important;} /* ========================================================================== KechElec — Vertical Progress Sync & Typography Breathing Lock ========================================================================== */ .ke-site .precision-copy .eyebrow{margin-bottom:clamp(8px,1.2vw,14px)!important;} .ke-site .precision-copy h2{line-height:1.06!important;text-wrap:balance!important;} .ke-site .precision-copy>p:last-child{margin-top:clamp(10px,1.4vw,16px)!important;line-height:1.48!important;} .ke-site .beforeafter .transformations-heading .eyebrow{margin-bottom:8px!important;} .ke-site .beforeafter .transformations-heading h2{line-height:1.07!important;text-wrap:balance!important;} @media(max-width:600px){ .ke-site .beforeafter{padding-top:42px!important;padding-bottom:34px!important;} .ke-site .beforeafter .transformations-heading{padding-top:16px!important;} } @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ .ke-site .precision{padding:12px var(--ke-ui-gutter)!important;} .ke-site .precision-wrap{min-height:286px!important;height:calc(100dvh - var(--header) - 30px)!important;max-height:330px!important;} .ke-site .precision-wrap:after{background:linear-gradient(90deg,rgba(6,7,10,.84) 0%,rgba(6,7,10,.56) 48%,rgba(6,7,10,.10) 78%),linear-gradient(0deg,rgba(6,7,10,.38),transparent 58%)!important;} .ke-site .precision-copy{width:min(58%,450px)!important;padding:20px 24px!important;justify-content:flex-end!important;} .ke-site .precision-copy .eyebrow{font-size:.58rem!important;line-height:1.2!important;margin-bottom:8px!important;} .ke-site .precision-copy h2{font-size:clamp(1.55rem,4.7vw,2.15rem)!important;line-height:1.08!important;max-width:18ch!important;} .ke-site .precision-copy>p:last-child{font-size:.76rem!important;line-height:1.43!important;margin-top:10px!important;max-width:46ch!important;} .ke-site .beforeafter{padding-top:38px!important;padding-bottom:30px!important;} .ke-site .beforeafter .transformations-heading{padding:16px 24px 0!important;grid-template-columns:minmax(0,.82fr) minmax(260px,1.18fr)!important;gap:24px!important;align-items:end!important;} .ke-site .beforeafter .transformations-heading .eyebrow{font-size:.58rem!important;margin-bottom:8px!important;} .ke-site .beforeafter .transformations-heading h2{font-size:clamp(1.65rem,4.8vw,2.2rem)!important;line-height:1.08!important;max-width:17ch!important;} .ke-site .beforeafter .transformations-heading>p{font-size:.78rem!important;line-height:1.45!important;padding-bottom:2px!important;} } /* Method progress sovereignty: one explicit indicator, no legacy pseudo race. */ .ke-site .method-card::before, .ke-site .method-card.active::before, .ke-site .method-card.active.ke-method-progress-running::before{ content:none!important;display:none!important;animation:none!important; } .ke-site .method-card .ke-method-progress{ position:absolute!important;z-index:5!important;inset-inline:0!important;inset-block-end:0!important; width:100%!important;height:3px!important;border:0!important;border-radius:0!important; background:linear-gradient(90deg,var(--ke-orange),var(--ke-blue))!important; transform:scaleX(0);transform-origin:left center!important;pointer-events:none!important; } .ke-site .method-card.active.ke-method-progress-running .ke-method-progress{ animation:keMethodProgressElement 6.5s linear both!important; } @keyframes keMethodProgressElement{from{transform:scaleX(0)}to{transform:scaleX(1)}} html[dir="rtl"] .ke-site .method-card .ke-method-progress{transform-origin:right center!important;} @media(prefers-reduced-motion:reduce){ .ke-site .method-card.active .ke-method-progress{animation:none!important;transform:scaleX(1)!important;} } /* SOURCE: assets/css/kechelec-hero-v220.css */ /* KechElec — Hero Semantic Storytelling Lock */ .hero-v220{isolation:isolate;} .hero-v220 .hero-page-title{margin:0 0 1.1rem!important;max-width:48rem!important;font-size:clamp(.78rem,1.05vw,.98rem)!important;line-height:1.25!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#f2c587!important;text-wrap:balance;text-shadow:0 4px 18px rgba(0,0,0,.34)!important;} .hero-v220 .hero-story.active{transition-delay:0s;} .hero-v220 .hero-story-kicker{margin:0 0 .7rem!important;color:rgba(255,255,255,.78)!important;font-size:clamp(.86rem,1.1vw,1rem)!important;font-weight:750;letter-spacing:.075em;text-transform:uppercase;} .hero-v220 .hero-story h2{margin:0!important;max-width:17ch!important;font-size:clamp(3.15rem,5.35vw,6.25rem)!important;line-height:.96!important;letter-spacing:-.045em!important;color:#fff!important;text-wrap:balance;text-shadow:0 12px 32px rgba(0,0,0,.34)!important;} .hero-v220 .hero-story-copy{margin-top:1.15rem!important;max-width:57ch!important;color:rgba(255,255,255,.9)!important;font-size:clamp(1rem,1.35vw,1.22rem)!important;line-height:1.55!important;text-shadow:0 7px 24px rgba(0,0,0,.28)!important;} .hero-v220 .hero-overlay{background:linear-gradient(90deg,rgba(6,6,8,.91) 0%,rgba(6,6,8,.72) 35%,rgba(6,6,8,.32) 62%,rgba(6,6,8,.08) 82%),linear-gradient(0deg,rgba(6,6,8,.55),transparent 50%)!important;} .hero-v220 .hero-slide picture,.hero-v220 .hero-slide picture img{display:block;width:100%;height:100%;}.hero-v220 .hero-slide picture img{object-fit:cover;}.hero-v220 .hero-slide img{object-position:center 48%!important;} html[data-color-theme="light"] .hero-v220 .hero-page-title{color:#ffad62!important;text-shadow:0 4px 18px rgba(0,0,0,.36)!important;}html[data-color-theme="light"] .hero-v220 .hero-story h2{color:#fff!important;}html[data-color-theme="light"] .hero-v220 .hero-story-copy{color:rgba(255,255,255,.92)!important;} body.rtl-page .hero-v220 .hero-story{text-align:right;direction:rtl;}body.rtl-page .hero-v220 .hero-page-title,body.rtl-page .hero-v220 .hero-story h2,body.rtl-page .hero-v220 .hero-story-copy{margin-inline-left:auto!important;margin-inline-right:0!important;}body.rtl-page .hero-v220 .hero-overlay{background:linear-gradient(270deg,rgba(6,6,8,.91) 0%,rgba(6,6,8,.72) 35%,rgba(6,6,8,.32) 62%,rgba(6,6,8,.08) 82%),linear-gradient(0deg,rgba(6,6,8,.55),transparent 50%)!important;} @media(max-width:700px){.hero-v220{min-height:760px!important;}.hero-v220 .hero-content{padding-top:calc(var(--header) + 4.2rem)!important;padding-bottom:5.8rem!important;align-self:end!important;}.hero-v220 .hero-page-title{margin-bottom:.8rem!important;max-width:31ch!important;font-size:.72rem!important;line-height:1.35!important;letter-spacing:.105em!important;}.hero-v220 .hero-story-deck{min-height:30.8rem;max-width:100%;}.hero-v220 .hero-story h2{max-width:13.5ch!important;font-size:clamp(2.25rem,10.7vw,3.45rem)!important;line-height:.98!important;letter-spacing:-.04em!important;}.hero-v220 .hero-story-copy{max-width:34ch!important;margin-top:.85rem!important;font-size:.96rem!important;line-height:1.48!important;}.hero-v220 .hero-story .actions{margin-top:1rem!important;gap:.65rem!important;}.hero-v220 .hero-story .actions .btn{min-height:48px;width:100%!important;}.hero-v220 .hero-overlay,body.rtl-page .hero-v220 .hero-overlay{background:linear-gradient(180deg,rgba(6,6,8,.08) 0%,rgba(6,6,8,.24) 26%,rgba(6,6,8,.77) 58%,rgba(6,6,8,.96) 100%)!important;}} @media(min-width:701px) and (max-width:1100px){.hero-v220 .hero-story-deck{min-height:29rem;}.hero-v220 .hero-story h2{font-size:clamp(3rem,6.1vw,4.8rem)!important;max-width:16ch!important;}} @media(prefers-reduced-motion:reduce){.hero-v220 .hero-story{transition:none!important;transform:none!important;}} /* SOURCE: assets/css/kechelec-hero-shell-v221.css */ /* KechElec — Hero Cinematic & Responsive Shell Lock */ /* ---------- Cinematic dissolve: image ---------- */ .hero-v220 .hero-slide{ opacity:0!important; visibility:visible!important; transition:opacity 1.45s cubic-bezier(.22,.61,.36,1)!important; will-change:opacity,transform; } .hero-v220 .hero-slide.active{opacity:1!important;z-index:2!important;} .hero-v220 .hero-slide.leaving{opacity:0!important;z-index:1!important;} .hero-v220.hero-shell-paused .hero-slide.active{animation-play-state:paused!important;} /* Per-scene framing. The images are not interchangeable crops. */ .hero-v220 .hero-slide:nth-child(1) img{object-position:54% 48%!important;} .hero-v220 .hero-slide:nth-child(2) img{object-position:58% 50%!important;} .hero-v220 .hero-slide:nth-child(3) img{object-position:57% 50%!important;} .hero-v220 .hero-slide:nth-child(4) img{object-position:54% 48%!important;} .hero-v220 .hero-slide:nth-child(5) img{object-position:55% 48%!important;} /* ---------- Cinematic dissolve: copy ---------- */ .hero-v220 .hero-story-deck{ position:relative!important; min-height:31rem!important; max-width:min(76rem,92vw)!important; } .hero-v220 .hero-story{ position:absolute!important; inset:0 auto auto 0!important; width:min(100%,76rem)!important; min-height:31rem!important; display:grid!important; grid-template-rows:auto minmax(3.9em,auto) minmax(4.5em,auto) auto!important; align-content:start!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:none!important; filter:blur(1.6px)!important; transition:opacity .62s ease,filter .62s ease,visibility 0s linear .64s!important; } .hero-v220 .hero-story.is-preparing{ visibility:visible!important; opacity:0!important; filter:blur(1.6px)!important; transition-delay:0s!important; } .hero-v220 .hero-story.is-leaving{ visibility:visible!important; opacity:0!important; filter:blur(1.6px)!important; transition:opacity .34s ease,filter .34s ease,visibility 0s linear .36s!important; } .hero-v220 .hero-story.active{ visibility:visible!important; opacity:1!important; pointer-events:auto!important; transform:none!important; filter:none!important; transition:opacity .68s ease,filter .68s ease!important; } .hero-v220 .hero-story-kicker{align-self:end!important;} .hero-v220 .hero-story h2{align-self:start!important;} .hero-v220 .hero-story-copy{align-self:start!important;} .hero-v220 .hero-story .actions{align-self:start!important;margin-top:1.15rem!important;} body.rtl-page .hero-v220 .hero-story{inset:0 0 auto auto!important;} /* ---------- Mobile portrait: fixed storytelling geometry ---------- */ @media (max-width:700px) and (orientation:portrait){ .hero-v220,body.rtl-page .hero-v14.hero-v220{min-height:740px!important;height:max(740px,100svh)!important;display:grid!important;} .hero-v220 .hero-content{ align-self:stretch!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; padding-top:calc(var(--header) + 2.4rem)!important; padding-bottom:4.9rem!important; } .hero-v220 .hero-page-title{ flex:0 0 auto!important; margin:0 0 .55rem!important; max-width:32ch!important; font-size:.66rem!important; line-height:1.28!important; letter-spacing:.085em!important; } .hero-v220 .hero-story-deck{ flex:0 0 27.9rem!important; min-height:27.9rem!important; height:27.9rem!important; max-width:100%!important; } .hero-v220 .hero-story{ min-height:27.9rem!important; height:27.9rem!important; grid-template-rows:1.8rem 9.4rem 6.55rem 6.4rem!important; align-content:start!important; } .hero-v220 .hero-story-kicker{ margin:0!important; font-size:.72rem!important; line-height:1.2!important; letter-spacing:.075em!important; overflow:hidden!important; } .hero-v220 .hero-story h2{ margin:0!important; max-width:15ch!important; font-size:clamp(1.88rem,8.9vw,2.15rem)!important; line-height:1.01!important; letter-spacing:-.037em!important; overflow:hidden!important; } .hero-v220 .hero-story-copy{ margin:0!important; max-width:35ch!important; font-size:.90rem!important; line-height:1.43!important; overflow:hidden!important; } .hero-v220 .hero-story .actions{ margin:0!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(2,44px)!important; gap:.48rem!important; align-content:start!important; } .hero-v220 .hero-story .actions .btn{ width:100%!important; min-height:44px!important; height:44px!important; padding:.56rem .85rem!important; font-size:.78rem!important; } .hero-v220 .hero-overlay,body.rtl-page .hero-v220 .hero-overlay{ background:linear-gradient(180deg,rgba(6,6,8,.07) 0%,rgba(6,6,8,.20) 25%,rgba(6,6,8,.70) 54%,rgba(6,6,8,.96) 100%)!important; } .hero-v220 .hero-slide:nth-child(1) img{object-position:56% 44%!important;} .hero-v220 .hero-slide:nth-child(2) img{object-position:54% 42%!important;} .hero-v220 .hero-slide:nth-child(3) img{object-position:55% 44%!important;} .hero-v220 .hero-slide:nth-child(4) img{object-position:51% 44%!important;} .hero-v220 .hero-slide:nth-child(5) img{object-position:54% 43%!important;} } /* Small portrait screens still keep both CTA in the first viewport. */ @media (max-width:390px) and (orientation:portrait) and (max-height:780px){ .hero-v220{min-height:720px!important;height:max(720px,100svh)!important;} .hero-v220 .hero-content{padding-top:calc(var(--header) + 1.8rem)!important;padding-bottom:4.4rem!important;} .hero-v220 .hero-page-title{font-size:.62rem!important;margin-bottom:.42rem!important;} .hero-v220 .hero-story-deck,.hero-v220 .hero-story{height:26.1rem!important;min-height:26.1rem!important;} .hero-v220 .hero-story{grid-template-rows:1.6rem 8.55rem 6.15rem 6.1rem!important;} .hero-v220 .hero-story h2{font-size:clamp(1.72rem,8.45vw,1.96rem)!important;line-height:1.01!important;} .hero-v220 .hero-story-copy{font-size:.85rem!important;line-height:1.39!important;} .hero-v220 .hero-story .actions{grid-template-rows:repeat(2,42px)!important;} .hero-v220 .hero-story .actions .btn{height:42px!important;min-height:42px!important;} } /* ---------- Phone landscape / short viewport: independent contract ---------- */ @media (orientation:landscape) and (max-height:520px) and (max-width:1049px){ .hero-v220,body.rtl-page .hero-v14.hero-v220{ min-height:100svh!important; height:100svh!important; display:grid!important; max-height:none!important; align-items:stretch!important; } .hero-v220 .hero-content{ align-self:stretch!important; display:flex!important; flex-direction:column!important; justify-content:center!important; width:calc(100% - 2.6rem)!important; padding:calc(var(--header) + .35rem) 0 2rem!important; } .hero-v220 .hero-page-title{ margin:0 0 .25rem!important; max-width:48ch!important; font-size:.56rem!important; line-height:1.18!important; letter-spacing:.07em!important; } .hero-v220 .hero-story-deck{ min-height:11.6rem!important; height:11.6rem!important; width:min(76%,44rem)!important; max-width:44rem!important; } .hero-v220 .hero-story{ min-height:11.6rem!important; height:11.6rem!important; grid-template-rows:1.35rem 4.4rem 3.25rem 2.6rem!important; width:100%!important; } .hero-v220 .hero-story-kicker{ margin:0!important; font-size:.60rem!important; line-height:1.1!important; letter-spacing:.065em!important; overflow:hidden!important; } .hero-v220 .hero-story h2{ max-width:28ch!important; margin:0!important; font-size:clamp(1.22rem,3.4vw,1.65rem)!important; line-height:.98!important; letter-spacing:-.035em!important; overflow:hidden!important; } .hero-v220 .hero-story-copy{ margin:0!important; max-width:54ch!important; font-size:.70rem!important; line-height:1.30!important; overflow:hidden!important; } .hero-v220 .hero-story .actions{ margin:0!important; display:flex!important; flex-wrap:nowrap!important; gap:.48rem!important; align-items:start!important; } .hero-v220 .hero-story .actions .btn{ width:auto!important; min-width:0!important; min-height:34px!important; height:34px!important; padding:.38rem .72rem!important; font-size:.68rem!important; white-space:nowrap!important; } .hero-v220 .hero-controls{bottom:.48rem!important;} .hero-v220 .hero-progress{bottom:.18rem!important;} .hero-v220 .hero-overlay{background:linear-gradient(90deg,rgba(6,6,8,.91) 0%,rgba(6,6,8,.78) 40%,rgba(6,6,8,.30) 70%,rgba(6,6,8,.05) 100%)!important;} body.rtl-page .hero-v220 .hero-overlay{background:linear-gradient(270deg,rgba(6,6,8,.91) 0%,rgba(6,6,8,.78) 40%,rgba(6,6,8,.30) 70%,rgba(6,6,8,.05) 100%)!important;} body.rtl-page .hero-v220 .hero-story-deck{margin-inline-start:auto!important;margin-inline-end:0!important;} .hero-v220 .hero-slide:nth-child(1) img{object-position:61% 46%!important;} .hero-v220 .hero-slide:nth-child(2) img{object-position:64% 50%!important;} .hero-v220 .hero-slide:nth-child(3) img{object-position:64% 50%!important;} .hero-v220 .hero-slide:nth-child(4) img{object-position:63% 48%!important;} .hero-v220 .hero-slide:nth-child(5) img{object-position:62% 48%!important;} body.rtl-page .hero-v220 .hero-slide:nth-child(1) img{object-position:39% 46%!important;} body.rtl-page .hero-v220 .hero-slide:nth-child(2) img{object-position:36% 50%!important;} body.rtl-page .hero-v220 .hero-slide:nth-child(3) img{object-position:36% 50%!important;} body.rtl-page .hero-v220 .hero-slide:nth-child(4) img{object-position:37% 48%!important;} body.rtl-page .hero-v220 .hero-slide:nth-child(5) img{object-position:38% 48%!important;} } /* ---------- Responsive shell / Cloud Dancer ---------- */ @media (max-width:1049px){ .ke-site .nav{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html[data-color-theme="dark"] .ke-site .nav{ background:#1b1b23!important; color:#f5f3ef!important; border-color:rgba(255,255,255,.12)!important; box-shadow:0 18px 40px rgba(0,0,0,.34)!important; } html[data-color-theme="dark"] .ke-site .nav>a, html[data-color-theme="dark"] .ke-site .lang-trigger, html[data-color-theme="dark"] .ke-site .theme-switch{color:#f5f3ef!important;} html[data-color-theme="light"] .ke-site .nav{ background:#f4ede2!important; color:#202127!important; border-color:rgba(31,32,39,.12)!important; box-shadow:0 18px 40px rgba(68,54,39,.18)!important; } html[data-color-theme="light"] .ke-site .nav>a, html[data-color-theme="light"] .ke-site .lang-trigger, html[data-color-theme="light"] .ke-site .theme-switch{color:#202127!important;opacity:1!important;} html[data-color-theme="light"] .ke-site .nav>a:hover, html[data-color-theme="light"] .ke-site .nav>a:focus-visible{background:rgba(32,33,39,.07)!important;} html[data-color-theme="light"] .ke-site .lang-dropdown{ background:#fffaf4!important; color:#202127!important; border-color:rgba(31,32,39,.10)!important; } html[data-color-theme="dark"] .ke-site .lang-dropdown{ background:#252630!important; color:#fff!important; } .ke-site .lang-dropdown{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} } /* Keep shell panels physically stable in RTL. */ @media(max-width:1049px){ html[dir="rtl"] .ke-site .nav{left:.65rem!important;right:.65rem!important;text-align:right!important;align-items:stretch!important;} html[dir="rtl"] .ke-site .lang-dropdown{left:auto!important;right:auto!important;} } /* Hero is deliberately frozen while a shell panel is open. */ .ke-site.ke-shell-panel-open .hero-v220 .hero-progress-bar{animation-play-state:paused!important;} .ke-site.ke-shell-panel-open .hero-v220 .hero-slide.active{animation-play-state:paused!important;} @media(prefers-reduced-motion:reduce){ .hero-v220 .hero-slide,.hero-v220 .hero-story{transition:none!important;filter:none!important;transform:none!important;} } /* Hero CTA Geometry Seal. Every slide uses the same two-column action geometry. Long translations may wrap or shrink through clamp; no slide may push one CTA out of alignment. */ .hero-v220 .hero-story .actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:min(100%,34rem)!important; max-width:34rem!important; gap:.62rem!important; align-items:stretch!important; } .hero-v220 .hero-story .actions .btn{ width:100%!important; min-width:0!important; max-width:100%!important; height:auto!important; min-height:42px!important; padding:.62rem .78rem!important; font-size:clamp(.68rem,.82vw,.82rem)!important; line-height:1.12!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; text-align:center!important; justify-content:center!important; } @media(max-width:600px) and (orientation:portrait){ .hero-v220 .hero-story .actions{grid-template-columns:1fr!important;width:min(100%,24rem)!important;max-width:24rem!important;gap:.48rem!important;} } @media (orientation:landscape) and (max-height:540px) and (max-width:980px){ .hero-v220 .hero-story .actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:min(100%,25rem)!important; max-width:25rem!important; gap:.42rem!important; } .hero-v220 .hero-story .actions .btn{ height:auto!important; min-height:34px!important; padding:.34rem .48rem!important; font-size:clamp(.56rem,1.55vw,.66rem)!important; line-height:1.05!important; white-space:normal!important; } } /* Desktop CTA baseline seal: content length may change by slide or language, but the two CTAs share one fixed visual baseline. */ @media (min-width:701px) and (min-height:541px){ .hero-v220 .hero-story-deck{ height:29rem!important; min-height:29rem!important; } .hero-v220 .hero-story{ height:29rem!important; min-height:29rem!important; grid-template-rows:auto auto auto minmax(3.5rem,1fr)!important; } .hero-v220 .hero-story h2{ font-size:clamp(2.75rem,4.8vw,5.25rem)!important; line-height:.96!important; } .hero-v220 .hero-story-copy{ margin-top:.9rem!important; } .hero-v220 .hero-story .actions{ align-self:end!important; margin-top:.55rem!important; margin-bottom:0!important; } } /* SOURCE: assets/css/kechelec-cognitive-shell-v228.css */ /* KechElec — Cognitive Smart Sticky + Edge Cue + Focus Snap Single contract: directional header, permanent micro-affordance, soft contextual snap. */ :root{ --ke-smart-header-offset:0%; --ke-smart-header-opacity:1; --ke-smart-header-visible:1; --ke-focus-safe-gap:10px; } .ke-site .header.ke-smart-sticky{ transform:translate3d(0,var(--ke-smart-header-offset),0)!important; opacity:var(--ke-smart-header-opacity)!important; will-change:transform,opacity; transition:box-shadow .22s ease,background-color .22s ease,backdrop-filter .22s ease!important; } .ke-site .header.ke-smart-sticky.ke-smart-header-hidden{ pointer-events:none; box-shadow:none!important; } .ke-site.ke-shell-panel-open .header.ke-smart-sticky, .ke-site .header.ke-smart-sticky:focus-within{ pointer-events:auto; } /* Edge Cue invisible 44px hit target + unmistakable micro menu tab. The tactile surface NEVER paints; only ::before/::after are visible. */ .ke-edge-cue{ all:unset; display:block!important; box-sizing:border-box!important; appearance:none!important; -webkit-appearance:none!important; position:fixed!important; z-index:1705!important; top:max(0px,env(safe-area-inset-top))!important; right:max(2px,env(safe-area-inset-right))!important; width:44px!important; height:44px!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; cursor:pointer!important; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-5px); transition:opacity .18s ease,transform .24s cubic-bezier(.22,.75,.22,1),visibility 0s linear .24s; -webkit-tap-highlight-color:transparent!important; } html[dir="rtl"] .ke-edge-cue{ right:auto!important; left:max(2px,env(safe-area-inset-left))!important; } .ke-edge-cue::before{ content:""; position:absolute; top:0; right:2px; width:40px; height:8px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,#ff6b00 0 68%,#087cff 68% 100%); box-shadow:0 2px 10px rgba(255,107,0,.34),0 1px 6px rgba(8,124,255,.18); opacity:.96; transition:height .16s ease,width .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease; } .ke-edge-cue::after{ content:"•••"; position:absolute; top:-1px; right:8px; width:28px; height:9px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.94); font:800 7px/1 system-ui,sans-serif; letter-spacing:2px; text-indent:2px; text-shadow:0 1px 2px rgba(0,0,0,.42); pointer-events:none; transition:transform .16s ease,opacity .16s ease; } html[dir="rtl"] .ke-edge-cue::before{right:auto;left:2px;} html[dir="rtl"] .ke-edge-cue::after{right:auto;left:8px;} .ke-site.ke-smart-cue-visible .ke-edge-cue{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; } .ke-edge-cue:hover::before,.ke-edge-cue:focus-visible::before,.ke-edge-cue:active::before{ height:11px; width:42px; box-shadow:0 3px 15px rgba(255,107,0,.52),0 0 12px rgba(8,124,255,.24); } .ke-edge-cue:hover::after,.ke-edge-cue:focus-visible::after,.ke-edge-cue:active::after{transform:translateY(1px) scale(1.05);} /* Keyboard focus is expressed by the tab itself, never by the 44x44 hitbox. */ .ke-edge-cue:focus-visible{outline:0!important;box-shadow:none!important;background:transparent!important;} /* current FINAL LOCK — the 44x44 tactile target never paints. This intentionally outranks legacy global button glow/focus rules. */ html body button.ke-edge-cue, html body button.ke-edge-cue:not(.secondary), html body button.ke-edge-cue:hover, html body button.ke-edge-cue:active, html body button.ke-edge-cue:focus, html body button.ke-edge-cue:focus-visible{ margin:0!important; padding:0!important; border:0!important; outline:0!important; border-radius:0!important; background:transparent!important; background-color:transparent!important; box-shadow:none!important; filter:none!important; -webkit-tap-highlight-color:transparent!important; } /* Soft snap anchors: JS only snaps in proximity. scroll-margin also fixes direct # anchors. */ .ke-focus-snap-anchor{ scroll-margin-top:calc(var(--header) + var(--ke-focus-safe-gap)); } .ke-site #methode, .ke-site #expertises, .ke-site #realisations, .ke-site #contact{ scroll-margin-top:calc(var(--header) + var(--ke-focus-safe-gap)); } /* While a contextual snap is finishing, avoid visual oscillation. */ .ke-site.ke-focus-snapping .header.ke-smart-sticky{ transition:none!important; } @media (max-width:1049px){ .ke-site .header.ke-smart-sticky .nav.open{ /* overlay, never pushes the reading position */ position:absolute!important; } } @media (prefers-reduced-motion:reduce){ .ke-site .header.ke-smart-sticky,.ke-edge-cue{transition:none!important;} .ke-edge-cue::before{transition:none!important;} } /* KechElec — Cross-browser rendering & geometry authority */ :root{--ke-short-landscape-header:58px;} /* A viewport is classified from its real visual geometry by kechelec-browser-compat-v237.js. This avoids width-only breakpoints changing behavior between Chrome and Edge emulation. */ html[data-ke-geometry="short-landscape"] .ke-app-dialog{height:var(--ke-visual-height,100dvh)!important;max-height:var(--ke-visual-height,100dvh)!important;} /* Firefox Android / Gecko WebRender safe path. Preserve the visual hierarchy but remove expensive/fragile compositing primitives. */ html[data-ke-renderer="safe-gecko"] *, html[data-ke-renderer="safe-gecko"] *::before, html[data-ke-renderer="safe-gecko"] *::after{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; will-change:auto!important; } html[data-ke-renderer="safe-gecko"] :is( .hero-slide,.gateway-avatar,.gateway-avatar img,.conversation-avatar-image,.voice-orb, .method-card picture img,.method-detail-media img,.story-image img,.before-after img, .ke-avatar,.ke-avatar-card,.ke-app-shell,.ke-stage,.ke-alt-stage,.ke-icon-btn, .topbar,.thread-head,#reply-form,.composer ){filter:none!important;} html[data-ke-renderer="safe-gecko"] :is(.gateway-avatar img,.conversation-avatar-image){ -webkit-mask-image:none!important;mask-image:none!important;} html[data-ke-renderer="safe-gecko"] :is(.hero-slide,.btn,button,.scroll-top,.method-card,.gateway-listen){ backface-visibility:visible!important;-webkit-backface-visibility:visible!important;} html[data-ke-renderer="safe-gecko"] :is(.header,.nav,.lang-dropdown,.conversation-dialog,.conversation-shell,.conversation-final-actions,.gateway-speech,.conversation-log,.conversation-compose){ background-color:rgba(12,13,16,.96)!important;} html[data-ke-renderer="safe-gecko"] :is(.ke-app-header,.ke-stage,.ke-alt-stage,.ke-app-menu,.ke-icon-btn,.ke-hub-side,.ke-profile button,.ke-urgent-badge,.ke-categories button,.ke-send){ background-color:#15161b!important;} /* Avoid hover translation on touch Firefox where it can promote large layers. */ html[data-ke-renderer="safe-gecko"] :is(button,.btn,.menu,.theme-switch,.scroll-top,.gateway-listen):hover, html[data-ke-renderer="safe-gecko"] :is(button,.btn,.menu,.theme-switch,.scroll-top,.gateway-listen):active{transform:none!important;} /* Safety fallback for Firefox if UA classification is unavailable. */ @supports (-moz-appearance:none){ .ke-site :is(.header,.btn,.menu,.theme-switch,.scroll-top,.gateway-speech,.conversation-dialog,.conversation-shell){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;} } /* KechElec — Cognitive Responsive Correction Authority Public UI hard-lock: method rail, safe inset, gateway affordance, compact forms/map, scroll-top discretion. Loaded last. Do not duplicate these rules in feature CSS. */ :root{ --ke244-safe-inset:16px; --ke244-control-h:44px; --ke244-control-radius:8px; --ke244-icon-box:24px; } /* 1. Method rail — protect useful size on every viewport. */ html body.ke-site .method-cards{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important; overflow:visible!important; padding:3px!important; } html body.ke-site .method-card, html body.ke-site .method-card:last-child{ grid-column:auto!important; min-height:clamp(148px,11.5vw,176px)!important; height:auto!important; max-height:none!important; padding:0!important; } html body.ke-site .method-card .method-no{ inset-block-start:14px!important; inset-inline-start:14px!important; font-size:clamp(1.9rem,2.6vw,2.7rem)!important; } html body.ke-site .method-card-copy{ inset-inline:14px!important; inset-block-end:14px!important; } html body.ke-site .method-card-copy strong{ font-family:var(--ke-font-display)!important; font-size:clamp(.96rem,1.2vw,1.14rem)!important; line-height:1.08!important; } html body.ke-site .method-card-copy small{display:block!important;font-size:.72rem!important;line-height:1.2!important;} /* 2. Global Safe Inset Authority — overlays never touch a card edge. */ html body.ke-site .transformation-compare .compare-label{ top:var(--ke244-safe-inset)!important; min-height:28px!important; padding:5px 9px!important; } html body.ke-site .transformation-compare .label-before{left:var(--ke244-safe-inset)!important;} html body.ke-site .transformation-compare .label-after{right:var(--ke244-safe-inset)!important;} /* 3. Gateway: explicit affordance and cognitive microcopy. */ html body.ke-site :is(.gateway-project-chip,.gateway-launch-free,.gateway-voice-cue,.gateway-trust-item,.ke-help-dot){cursor:pointer!important;} html body.ke-site .gateway-interaction-surface{ grid-template-areas:"voice launch" "trust trust" "help help"!important; overflow:visible!important; } html body.ke-site .gateway-project-option{ position:relative!important; display:grid!important; min-width:0!important; } html body.ke-site .gateway-project-option>.gateway-project-chip{padding-inline:12px 38px!important;} html[dir="rtl"] body.ke-site .gateway-project-option>.gateway-project-chip{padding-inline:38px 12px!important;} html body.ke-site .ke-help-dot{ position:absolute!important; z-index:5!important; inset-inline-end:8px!important; top:50%!important; transform:translateY(-50%)!important; width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; padding:0!important; display:grid!important; place-items:center!important; border-radius:50%!important; border:1px solid rgba(255,255,255,.36)!important; background:rgba(12,13,17,.24)!important; color:currentColor!important; font:850 12px/1 var(--ke-font-ui)!important; box-shadow:none!important; backdrop-filter:blur(8px)!important; } html[data-color-theme="light"] body.ke-site .ke-help-dot{background:rgba(255,255,255,.48)!important;border-color:rgba(35,35,38,.22)!important;} html body.ke-site .ke-help-dot:hover, html body.ke-site .ke-help-dot:focus-visible{transform:translateY(-50%) scale(1.06)!important;outline:2px solid rgba(8,124,255,.36)!important;outline-offset:1px!important;} /* Voice cue: waveform is part of the avatar, not a tiny decoration. */ html body.ke-site .gateway-voice-wave{ left:12%!important; right:12%!important; bottom:39px!important; height:29px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; z-index:3!important; pointer-events:none!important; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))!important; } html[dir="rtl"] body.ke-site .gateway-voice-wave{left:12%!important;right:12%!important;} html body.ke-site .gateway-voice-wave i{ flex:1 1 0!important; width:auto!important; max-width:7px!important; min-width:3px!important; border-radius:999px!important; background:linear-gradient(180deg,#ffd7b7,var(--ke-orange-hi) 44%,var(--ke-orange))!important; transform-origin:center!important; animation:ke244VoicePulse 1.15s ease-in-out infinite!important; } html body.ke-site .gateway-voice-wave i:nth-child(3n/**/+1){height:9px!important;animation-delay:.05s!important;} html body.ke-site .gateway-voice-wave i:nth-child(3n/**/+2){height:21px!important;animation-delay:.13s!important;} html body.ke-site .gateway-voice-wave i:nth-child(3n){height:14px!important;animation-delay:.21s!important;} html body.ke-site .gateway-voice-wave i:nth-child(4n){height:26px!important;animation-delay:.29s!important;} @keyframes ke244VoicePulse{0%,100%{transform:scaleY(.52);opacity:.62}50%{transform:scaleY(1.12);opacity:1}} html body.ke-site .gateway-voice-copy{bottom:12px!important;} html body.ke-site .gateway-voice-copy strong{font-family:var(--ke-font-ui)!important;font-weight:850!important;letter-spacing:-.01em!important;} /* Trust strip is an actual contextual-help tool. */ html body.ke-site .gateway-trust-item{ appearance:none!important; -webkit-appearance:none!important; width:100%!important; min-height:42px!important; padding:7px 9px!important; grid-template-columns:22px minmax(0,1fr) 16px!important; align-items:center!important; text-align:start!important; font:inherit!important; transition:background .16s ease,border-color .16s ease,transform .16s ease!important; } html body.ke-site .gateway-trust-item::after{ content:"?"!important; display:grid!important; place-items:center!important; width:16px!important;height:16px!important; border-radius:50%!important; border:1px solid currentColor!important; opacity:.48!important; font:800 10px/1 var(--ke-font-ui)!important; } html body.ke-site .gateway-trust-item:hover, html body.ke-site .gateway-trust-item:focus-visible{transform:translateY(-1px)!important;background:rgba(255,107,0,.055)!important;outline:0!important;} html body.ke-site .gateway-trust-item strong{ font-size:.78rem!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } html body.ke-site .gateway-trust-item small{display:none!important;} html body.ke-site .ke-context-help{ grid-area:help!important; position:relative!important; display:grid!important; grid-template-columns:minmax(0,1fr) 30px!important; gap:10px!important; align-items:start!important; margin-top:0!important; padding:12px 14px!important; border:1px solid rgba(255,107,0,.28)!important; border-radius:8px!important; background:rgba(18,19,25,.88)!important; box-shadow:0 14px 32px rgba(0,0,0,.18)!important; backdrop-filter:blur(14px) saturate(135%)!important; } html[data-color-theme="light"] body.ke-site .ke-context-help{background:rgba(255,249,241,.96)!important;border-color:rgba(95,48,20,.18)!important;color:#25262d!important;} html body.ke-site .ke-context-help[hidden]{display:none!important;} html body.ke-site .ke-context-help strong{display:block!important;margin:0 0 3px!important;font-size:.86rem!important;} html body.ke-site .ke-context-help p{margin:0!important;font-size:.76rem!important;line-height:1.4!important;opacity:.78!important;} html body.ke-site .ke-context-help-close{ width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important; border-radius:7px!important;display:grid!important;place-items:center!important;font-size:1rem!important;cursor:pointer!important; } /* 4. Scroll-to-top is a quiet utility, never a primary CTA. */ html body.ke-site button.scroll-top[data-scroll-top]{ width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important; padding:0!important;border-radius:10px!important; background:rgba(255,107,0,.27)!important; border:1px solid rgba(255,107,0,.34)!important; color:rgba(255,255,255,.88)!important; box-shadow:0 6px 16px rgba(0,0,0,.12)!important; backdrop-filter:blur(9px)!important; opacity:.62!important; font-size:15px!important; } html[data-color-theme="light"] body.ke-site button.scroll-top[data-scroll-top]{color:rgba(25,25,28,.78)!important;background:rgba(255,107,0,.20)!important;border-color:rgba(118,56,12,.22)!important;} html body.ke-site button.scroll-top[data-scroll-top]:hover, html body.ke-site button.scroll-top[data-scroll-top]:focus-visible{opacity:.92!important;background:rgba(255,107,0,.36)!important;transform:translateY(-1px)!important;} /* 5. Compact form/control authority. */ html body.ke-site .contact-card :is(input:not([type="hidden"]),select){ min-height:var(--ke244-control-h)!important; height:var(--ke244-control-h)!important; padding-block:0!important; padding-inline:12px!important; border-radius:var(--ke244-control-radius)!important; font-size:.92rem!important; } html body.ke-site .contact-card .field{gap:6px!important;} html body.ke-site .contact-card .form-grid{gap:12px 14px!important;} html body.ke-site .geo-picker-head{margin-bottom:9px!important;} html body.ke-site .geo-picker-head h3{font-family:var(--ke-font-display)!important;font-size:1.12rem!important;margin:1px 0 3px!important;} html body.ke-site .geo-picker-head p{font-size:.78rem!important;line-height:1.3!important;} html body.ke-site .geo-kicker{font-size:.58rem!important;letter-spacing:.13em!important;} html body.ke-site .geo-actions{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;margin-bottom:8px!important;align-items:stretch!important;} html body.ke-site .geo-search{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;} html body.ke-site :is(.geo-locate,.geo-search button,.geo-confirm){ min-height:var(--ke244-control-h)!important; height:var(--ke244-control-h)!important; padding:0 12px!important; border-radius:var(--ke244-control-radius)!important; font-size:.76rem!important; line-height:1.1!important; white-space:nowrap!important; } html body.ke-site .geo-search input{ min-height:var(--ke244-control-h)!important;height:var(--ke244-control-h)!important; padding:0 11px!important;border-radius:var(--ke244-control-radius)!important;font-size:.86rem!important; } html body.ke-site .geo-map-surface{padding:6px!important;border-radius:8px!important;} html body.ke-site .contact-card .geo-map{height:clamp(285px,38vh,430px)!important;min-height:260px!important;border-radius:7px!important;} html body.ke-site .geo-confirm-row{margin-top:7px!important;gap:8px!important;} /* Tablet and phone: preserve hierarchy while compressing chrome. */ @media(max-width:900px){ :root{--ke244-safe-inset:14px;--ke244-control-h:42px;} html body.ke-site .method-cards{ grid-template-columns:none!important; grid-auto-flow:column!important; grid-auto-columns:minmax(170px,32vw)!important; gap:9px!important; overflow-x:auto!important; overflow-y:hidden!important; scroll-snap-type:x mandatory!important; scrollbar-width:none!important; } html body.ke-site .method-cards::-webkit-scrollbar{display:none!important;} html body.ke-site .method-card, html body.ke-site .method-card:last-child{min-height:148px!important;scroll-snap-align:start!important;} html body.ke-site .method-card-copy small{display:none!important;} } @media(max-width:600px){ :root{--ke244-safe-inset:12px;--ke244-control-h:42px;} html body.ke-site .method-cards{grid-auto-columns:minmax(154px,68vw)!important;gap:8px!important;padding-inline:2px!important;} html body.ke-site .method-card, html body.ke-site .method-card:last-child{min-height:142px!important;} html body.ke-site .method-card .method-no{font-size:1.95rem!important;inset-block-start:11px!important;inset-inline-start:11px!important;} html body.ke-site .method-card-copy{inset-inline:11px!important;inset-block-end:11px!important;} html body.ke-site .method-card-copy strong{font-size:.92rem!important;} html body.ke-site .gateway-interaction-surface{ grid-template-areas:"voice" "launch" "trust" "help"!important; padding:12px!important; gap:11px!important; } html body.ke-site button.gateway-voice-cue{width:min(220px,76vw)!important;max-width:220px!important;} html body.ke-site .gateway-voice-wave{left:10%!important;right:10%!important;bottom:41px!important;height:30px!important;gap:3px!important;} html body.ke-site .gateway-launch-hint{font-size:.80rem!important;line-height:1.3!important;} html body.ke-site .gateway-project-option>.gateway-project-chip{min-height:44px!important;height:44px!important;font-size:.78rem!important;} html body.ke-site button.gateway-launch-free{min-height:54px!important;padding-block:6px!important;} html body.ke-site .gateway-free-copy strong{font-size:.82rem!important;} html body.ke-site .gateway-free-copy small{font-size:.62rem!important;} html body.ke-site .gateway-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;} html body.ke-site .gateway-trust-item{min-height:38px!important;padding:5px 7px!important;grid-template-columns:19px minmax(0,1fr) 14px!important;gap:5px!important;} html body.ke-site .gateway-trust-icon{width:18px!important;height:18px!important;font-size:.58rem!important;} html body.ke-site .gateway-trust-item strong{font-size:.66rem!important;} html body.ke-site .gateway-trust-item::after{width:14px!important;height:14px!important;font-size:8px!important;} html body.ke-site .ke-context-help{padding:10px 11px!important;} html body.ke-site button.scroll-top[data-scroll-top]{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;opacity:.52!important;} html body.ke-site .contact-card{padding:10px!important;} html body.ke-site .contact-card .form-grid{gap:9px!important;} html body.ke-site .contact-card :is(input:not([type="hidden"]),select){font-size:.86rem!important;} html body.ke-site .geo-picker{margin:12px 0!important;} html body.ke-site .geo-actions{grid-template-columns:1fr!important;gap:6px!important;} html body.ke-site .geo-search{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;} html body.ke-site :is(.geo-locate,.geo-search button,.geo-confirm){font-size:.72rem!important;padding-inline:9px!important;} html body.ke-site .geo-search input{font-size:.80rem!important;padding-inline:9px!important;} html body.ke-site .contact-card .geo-map{height:280px!important;min-height:250px!important;} } /* Phone landscape: five method steps remain usable; controls yield space to the map. */ @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ :root{--ke244-safe-inset:12px;--ke244-control-h:40px;} html body.ke-site .method-cards{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; grid-auto-flow:row!important; grid-auto-columns:auto!important; overflow:visible!important; gap:7px!important; } html body.ke-site .method-card, html body.ke-site .method-card:last-child{min-height:94px!important;} html body.ke-site .method-card .method-no{font-size:1.45rem!important;inset-block-start:8px!important;inset-inline-start:8px!important;} html body.ke-site .method-card-copy{inset-inline:8px!important;inset-block-end:8px!important;} html body.ke-site .method-card-copy strong{font-size:.72rem!important;line-height:1.05!important;} html body.ke-site .method-card-copy small{display:none!important;} html body.ke-site .method-detail{min-height:270px!important;} html body.ke-site .gateway-interaction-surface{ grid-template-columns:132px minmax(0,1fr)!important; grid-template-areas:"voice launch" "trust trust" "help help"!important; padding:10px!important;gap:8px 12px!important; } html body.ke-site button.gateway-voice-cue{width:132px!important;height:132px!important;min-width:132px!important;min-height:132px!important;} html body.ke-site .gateway-voice-wave{left:9%!important;right:9%!important;bottom:34px!important;height:24px!important;gap:2px!important;} html body.ke-site .gateway-voice-copy{bottom:9px!important;}.ke-site .gateway-voice-copy strong{font-size:.72rem!important;} html body.ke-site .gateway-project-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;} html body.ke-site .gateway-project-option>.gateway-project-chip{height:38px!important;min-height:38px!important;font-size:.66rem!important;padding-inline:8px 31px!important;} html[dir="rtl"] body.ke-site .gateway-project-option>.gateway-project-chip{padding-inline:31px 8px!important;} html body.ke-site .ke-help-dot{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;inset-inline-end:6px!important;font-size:10px!important;} html body.ke-site button.gateway-launch-free{min-height:44px!important;height:44px!important;padding:4px 8px!important;} html body.ke-site .gateway-free-copy strong{font-size:.72rem!important;}.ke-site .gateway-free-copy small{font-size:.56rem!important;} html body.ke-site .gateway-trust-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;} html body.ke-site .gateway-trust-item{min-height:32px!important;padding:4px 5px!important;grid-template-columns:16px minmax(0,1fr) 12px!important;gap:4px!important;} html body.ke-site .gateway-trust-icon{width:16px!important;height:16px!important;}.ke-site .gateway-trust-item strong{font-size:.56rem!important;}.ke-site .gateway-trust-item::after{width:12px!important;height:12px!important;font-size:7px!important;} html body.ke-site .ke-context-help{padding:8px 10px!important;}.ke-site .ke-context-help p{font-size:.68rem!important;} html body.ke-site .contact-card{padding:9px!important;} html body.ke-site .contact-card .form-grid{gap:7px 9px!important;} html body.ke-site .contact-card .field label{font-size:.70rem!important;margin:0!important;} html body.ke-site .geo-picker{margin:8px 0!important;} html body.ke-site .geo-picker-head{margin-bottom:6px!important;}.ke-site .geo-picker-head h3{font-size:1rem!important;}.ke-site .geo-picker-head p{font-size:.70rem!important;}.ke-site .geo-kicker{font-size:.50rem!important;} html body.ke-site .geo-actions{grid-template-columns:auto minmax(0,1fr)!important;gap:6px!important;margin-bottom:6px!important;} html body.ke-site .geo-search{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;} html body.ke-site :is(.geo-locate,.geo-search button,.geo-confirm){font-size:.66rem!important;padding-inline:8px!important;} html body.ke-site .geo-search input{font-size:.74rem!important;} html body.ke-site .geo-map-surface{padding:5px!important;} html body.ke-site .contact-card .geo-map{height:250px!important;min-height:230px!important;} html body.ke-site .geo-confirm-row{margin-top:5px!important;} } @media(prefers-reduced-motion:reduce){ html body.ke-site .gateway-voice-wave i{animation:none!important;transform:none!important;opacity:.86!important;} } /* Foundation Consolidation: safe inset, geo authority, short-view budget */ html body.ke-site .beforeafter .transformations-heading{padding-block-start:16px!important;} html body.ke-site .beforeafter .transformations-heading>.eyebrow:first-child, html body.ke-site .beforeafter .transformations-heading>div:first-child>.eyebrow:first-child{margin-top:0!important;} html body.ke-site .ke-map-switch{display:flex!important;gap:3px!important;background:rgba(250,247,232,.52)!important;backdrop-filter:blur(8px)!important;border:1px solid rgba(41,42,52,.15)!important;border-radius:8px!important;padding:3px!important;box-shadow:0 4px 14px rgba(0,0,0,.12)!important;} html body.ke-site .ke-map-switch button{min-height:30px!important;padding:5px 8px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#292A34!important;opacity:.72!important;font-size:.68rem!important;font-weight:800!important;cursor:pointer!important;} html body.ke-site .ke-map-switch button.active{background:rgba(255,107,0,.72)!important;color:#18191f!important;opacity:.92!important;} html body.ke-site .geo-picker.is-confirmed .geo-search{opacity:.72!important;} @media (orientation:landscape) and (max-height:520px){ html body.ke-site .contact-card .geo-picker{padding:8px!important;margin:8px 0!important;} html body.ke-site .contact-card .geo-picker-head{margin-bottom:6px!important;} html body.ke-site .contact-card .geo-picker-head p{display:none!important;} html body.ke-site .contact-card .geo-actions{gap:5px!important;} html body.ke-site .contact-card .geo-map{height:clamp(120px,34dvh,165px)!important;min-height:120px!important;} html body.ke-site .contact-card .geo-confirm-row{margin-top:5px!important;grid-template-columns:minmax(0,1fr) auto!important;} html body.ke-site .contact-card .geo-confirm{min-height:36px!important;padding:6px 10px!important;font-size:.68rem!important;} html body.ke-site .contact-card .geo-address small{display:none!important;} } @media (max-width:420px) and (orientation:portrait){ html body.ke-site .beforeafter .transformations-heading{padding-block-start:16px!important;} } /* hero fallback authority */ .ke-site .hero-v14{background-color:#111;background-image:url(/assets/images/kechelec-electricien-marrakech-installation-electrique-solaire-desktop.webp?v=2.1.1-r11-r2);background-size:cover;background-position:center} /* absorbed RTL mobile critical authority */ /* minimal critical RTL safety. Responsive geometry belongs to the final V221 stylesheet. */ body.rtl-page{direction:rtl} body.rtl-page .hero-v14{direction:ltr!important;display:grid!important;position:relative!important;width:100%!important;overflow:hidden!important;background:#111 url("/assets/images/kechelec-electricien-marrakech-installation-electrique-solaire-desktop.webp?v=2.1.1-r11-r2") center/cover no-repeat!important;isolation:isolate!important} body.rtl-page .hero-v14 .hero-hard-fallback{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important;opacity:1!important;visibility:visible!important} body.rtl-page .hero-v14 .hero-media{display:block!important;position:absolute!important;inset:0!important;z-index:1!important;direction:ltr!important} body.rtl-page .hero-v14 .hero-slide{display:block!important;position:absolute!important;inset:0!important;visibility:visible!important} body.rtl-page .hero-v14 .hero-slide img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important} body.rtl-page .hero-v14 .hero-overlay{display:block!important;position:absolute!important;inset:0!important;z-index:2!important} body.rtl-page .hero-v14 .hero-content{direction:rtl!important;text-align:right!important;position:relative!important;z-index:3!important;box-sizing:border-box!important} body.rtl-page .hero-v14 .hero-controls,body.rtl-page .hero-v14 .hero-progress{z-index:4!important} /* Bible Closure Authority: hidden, safe insets, geo state, form contrast */ html body.ke-site [hidden]{display:none!important;} :root{--ke246-card-inset:16px;--ke246-card-inset-compact:12px;} html body.ke-site .beforeafter .transformation-stage{padding:var(--ke246-card-inset)!important;} html body.ke-site .beforeafter .transformation-workspace{padding:20px!important;} html body.ke-site .geo-status[data-kind="success"]{display:inline-flex!important;align-items:center!important;min-height:28px!important;margin:0 0 8px!important;padding:5px 8px!important;border:1px solid rgba(45,145,90,.24)!important;border-radius:7px!important;background:rgba(45,145,90,.08)!important;color:#286a46!important;font-weight:800!important;} html[data-color-theme="dark"] body.ke-site .geo-status[data-kind="success"]{color:#9be0b9!important;background:rgba(51,176,108,.10)!important;border-color:rgba(88,213,145,.25)!important;} html[data-color-theme="light"] body.ke-site .contact-card textarea{color:#1f2027!important;background:rgba(255,255,255,.96)!important;border-color:rgba(31,32,39,.18)!important;caret-color:#1f2027!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;} html[data-color-theme="light"] body.ke-site .contact-card textarea::placeholder{color:#777983!important;opacity:1!important;} html[data-color-theme="light"] body.ke-site .contact-card textarea:hover{background:#fff!important;border-color:rgba(31,32,39,.26)!important;} html[data-color-theme="light"] body.ke-site .contact-card textarea:focus{color:#1f2027!important;background:#fff!important;border-color:rgba(255,107,0,.72)!important;caret-color:#1f2027!important;box-shadow:0 0 0 3px rgba(255,107,0,.13),inset 0 1px 0 rgba(255,255,255,.9)!important;} html[data-color-theme="dark"] body.ke-site .contact-card textarea{color:#f8f5e7!important;background:rgba(32,33,42,.94)!important;border-color:rgba(174,204,216,.28)!important;caret-color:#fff!important;} html[data-color-theme="dark"] body.ke-site .contact-card textarea::placeholder{color:#aeb0ba!important;opacity:1!important;} @media(max-width:600px){html body.ke-site .beforeafter .transformation-stage{padding:var(--ke246-card-inset-compact)!important;}html body.ke-site .beforeafter .transformation-workspace{padding:var(--ke246-card-inset)!important;}} @media(orientation:landscape) and (max-height:520px) and (max-width:960px){html body.ke-site .beforeafter .transformation-stage{padding:var(--ke246-card-inset-compact)!important;}html body.ke-site .beforeafter .transformation-workspace{padding:var(--ke246-card-inset)!important;}} /* Global navigation loading authority */ body .ke-page-loading{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:16px;background:rgba(18,18,20,.28);backdrop-filter:blur(3px);} body .ke-page-loading[hidden]{display:none!important;} body .ke-page-loading__card{display:flex;align-items:center;gap:12px;min-width:170px;padding:12px 16px;border:1px solid rgba(60,48,38,.18);border-radius:10px;background:rgba(255,250,243,.96);box-shadow:0 18px 42px rgba(40,28,18,.18);color:#242329;} html[data-color-theme="dark"] body .ke-page-loading__card,body[data-theme="dark"] .ke-page-loading__card{background:rgba(25,25,31,.97);border-color:rgba(255,255,255,.13);color:#f7f3ee;} body .ke-page-loading__spinner{position:relative;width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;} body .ke-page-loading__spinner::before{content:"";position:absolute;inset:-3px;border:2px solid rgba(90,70,50,.12);border-top-color:#ff6b32;border-radius:50%;animation:ke247-page-spin .72s linear infinite;} body .ke-page-loading__spinner img{width:28px;height:28px;object-fit:contain;} body .ke-page-loading__card strong{font:800 .78rem/1.2 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;} @keyframes ke247-page-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){body .ke-page-loading__spinner::before{animation:none!important;}} /* V2.1.1 — Cognitive Compact Responsive UI Authority · public operational controls */ .ke-site{--ke-public-control-h:38px;--ke-public-gap:7px;--ke-public-pad:9px} .ke-site :is(form input:not([type="checkbox"]):not([type="radio"]),form select,form textarea){min-height:var(--ke-public-control-h);padding:7px 9px!important;border-radius:8px!important} .ke-site :is(form button,.btn,.button){min-height:var(--ke-public-control-h);padding:6px 10px!important;border-radius:8px!important} .ke-site :is(.contact-form,.quote-form,.geo-card,.conversation-entry,.gateway-panel){gap:var(--ke-public-gap)} @media(max-width:600px){.ke-site{--ke-public-control-h:42px;--ke-public-gap:6px}.ke-site :is(form input:not([type="checkbox"]):not([type="radio"]),form select,form textarea){font-size:16px!important}} @media(orientation:landscape) and (max-height:520px){.ke-site{--ke-public-control-h:32px;--ke-public-gap:5px}.ke-site :is(form button,.btn,.button){min-height:32px!important;padding:4px 8px!important}} /* V2.1.1 — Public Map / Page Scroll Ownership Authority */ html body.ke-site .geo-map-surface,html body.ke-site .geo-map{overscroll-behavior:auto!important}html body.ke-site .geo-map{touch-action:pan-y!important}html body.ke-site button.scroll-top[data-scroll-top].visible{pointer-events:auto!important;z-index:1400!important} /* V2.1.1 — Theme Card Authority · Before/After Bottom Spacing Authority Every public card/surface that visually frames content must react to the canonical data-color-theme. Photo content remains factual; the framing, overlay and surrounding surface carry the light/dark change. */ html[data-color-theme="dark"] body.ke-site{ --ke266-card-surface:#20212a; --ke266-card-surface-2:#292a34; --ke266-card-line:rgba(174,204,216,.20); --ke266-card-shadow:0 22px 54px rgba(5,6,10,.30); --ke266-photo-overlay:linear-gradient(180deg,rgba(4,5,8,.08) 14%,rgba(4,5,8,.34) 55%,rgba(4,5,8,.90) 100%); --ke266-service-overlay:linear-gradient(0deg,rgba(4,5,8,.88),rgba(4,5,8,.12) 68%); --ke266-precision-overlay:linear-gradient(90deg,rgba(4,5,8,.84) 0%,rgba(4,5,8,.54) 45%,rgba(4,5,8,.10) 76%),linear-gradient(0deg,rgba(4,5,8,.48),transparent 58%); --ke266-delivery-overlay:linear-gradient(90deg,rgba(4,5,8,.78) 0%,rgba(4,5,8,.48) 46%,rgba(4,5,8,.06) 78%),linear-gradient(0deg,rgba(4,5,8,.46),transparent 62%); } html[data-color-theme="light"] body.ke-site{ --ke266-card-surface:#f3eadc; --ke266-card-surface-2:#eadfce; --ke266-card-line:rgba(56,46,37,.14); --ke266-card-shadow:0 20px 48px rgba(75,57,38,.13); --ke266-photo-overlay:linear-gradient(180deg,rgba(72,53,38,.02) 14%,rgba(64,47,35,.16) 55%,rgba(27,23,20,.76) 100%); --ke266-service-overlay:linear-gradient(0deg,rgba(28,23,19,.76),rgba(72,53,38,.04) 70%); --ke266-precision-overlay:linear-gradient(90deg,rgba(38,31,26,.70) 0%,rgba(44,35,28,.34) 46%,rgba(246,238,226,.04) 78%),linear-gradient(0deg,rgba(38,31,26,.30),transparent 62%); --ke266-delivery-overlay:linear-gradient(90deg,rgba(38,31,26,.66) 0%,rgba(48,38,30,.30) 48%,rgba(246,238,226,.03) 80%),linear-gradient(0deg,rgba(38,31,26,.28),transparent 64%); } html[data-color-theme="dark"] body.ke-site .story{background:#1b1c25!important;} html[data-color-theme="light"] body.ke-site .story{background:linear-gradient(180deg,#f7f0e5,#eee3d3)!important;color:#202127!important;} html[data-color-theme="dark"] body.ke-site .precision{background:#171820!important;} html[data-color-theme="light"] body.ke-site .precision{background:linear-gradient(180deg,#eee4d5,#e7dbc9)!important;} html body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap,.transformation-workspace,.transformation-stage){ border-color:var(--ke266-card-line)!important; box-shadow:var(--ke266-card-shadow)!important; } html body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap){background:var(--ke266-card-surface)!important;} html[data-color-theme="dark"] body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap){box-shadow:0 22px 54px rgba(5,6,10,.30)!important;} html[data-color-theme="light"] body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap){box-shadow:0 20px 48px rgba(75,57,38,.13)!important;} html body.ke-site .method-card::after, html body.ke-site .method-detail::after, html body.ke-site .story-step::after{background:var(--ke266-photo-overlay)!important;} html body.ke-site .service::after{background:var(--ke266-service-overlay)!important;} html body.ke-site .precision-wrap::after{background:var(--ke266-precision-overlay)!important;} html body.ke-site .delivery::after{background:var(--ke266-delivery-overlay)!important;} html[data-color-theme="light"] body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap,.transformation-workspace,.transformation-stage){ outline-color:rgba(255,255,255,.52)!important; } html[data-color-theme="dark"] body.ke-site :is(.method-card,.method-detail,.story-step,.service,.precision-wrap,.transformation-workspace,.transformation-stage){ outline-color:rgba(255,255,255,.06)!important; } /* Before/after: retain an explicit visual floor under the comparison image. */ :root{--ke266-beforeafter-inset:16px;--ke266-beforeafter-bottom-gap:26px;--ke266-beforeafter-inset-mobile:12px;--ke266-beforeafter-bottom-gap-mobile:19px;} html body.ke-site .beforeafter .transformation-stage{ padding:var(--ke266-beforeafter-inset) var(--ke266-beforeafter-inset) var(--ke266-beforeafter-bottom-gap)!important; } html body.ke-site .beforeafter .transformation-workspace{ padding:20px 20px max(24px,var(--ke266-beforeafter-bottom-gap))!important; } @media(max-width:600px){ html body.ke-site .beforeafter .transformation-stage{padding:var(--ke266-beforeafter-inset-mobile) var(--ke266-beforeafter-inset-mobile) var(--ke266-beforeafter-bottom-gap-mobile)!important;} html body.ke-site .beforeafter .transformation-workspace{padding:var(--ke266-beforeafter-inset) var(--ke266-beforeafter-inset) 22px!important;} } @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ html body.ke-site .beforeafter .transformation-stage{padding:10px 10px 16px!important;} html body.ke-site .beforeafter .transformation-workspace{padding:12px 12px 18px!important;} } /* V2.1.1 — Before/After Visible Bottom Inset Authority The visible comparison is carried by .transformation-panel > .transformation-compare. The floor therefore belongs to the direct panel, not to an outer section wrapper. */ :root{ --ke267-beforeafter-panel-floor:42px; --ke267-beforeafter-panel-floor-mobile:28px; --ke267-beforeafter-panel-floor-landscape:22px; --ke267-beforeafter-stage-inset:12px; } html body.ke-site .beforeafter .transformation-stage{ padding:var(--ke267-beforeafter-stage-inset)!important; } html body.ke-site .beforeafter .transformation-panel{ box-sizing:border-box!important; padding:0 0 var(--ke267-beforeafter-panel-floor)!important; } html body.ke-site .beforeafter .transformation-panel>.transformation-compare{ display:block!important; margin:0!important; } @media(max-width:600px){ html body.ke-site .beforeafter .transformation-stage{padding:10px!important;} html body.ke-site .beforeafter .transformation-panel{padding-bottom:var(--ke267-beforeafter-panel-floor-mobile)!important;} } @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ html body.ke-site .beforeafter .transformation-stage{padding:8px!important;} html body.ke-site .beforeafter .transformation-panel{padding-bottom:var(--ke267-beforeafter-panel-floor-landscape)!important;} } /* V2.1.1 — Single Card Authority & Light Theme Text Repair The before/after module must expose only one clean rounded card. Remove the decorative background wrapper and keep the comparison card as the sole visible surface. Also restore readable editorial contrast in the light theme for the public headings. */ :root{ --ke268-beforeafter-floor:30px; --ke268-beforeafter-floor-mobile:22px; --ke268-beforeafter-floor-landscape:18px; } html body.ke-site .beforeafter .transformation-workspace{ margin-top:clamp(28px,4vw,48px)!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; } html body.ke-site .beforeafter .transformation-stage{ padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; } html body.ke-site .beforeafter .transformation-panel{ box-sizing:border-box!important; padding:0 0 var(--ke268-beforeafter-floor)!important; background:transparent!important; border:0!important; box-shadow:none!important; } html body.ke-site .beforeafter .transformation-panel>.transformation-compare{ display:block!important; margin:0!important; overflow:hidden!important; border-radius:10px!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:0 22px 52px rgba(0,0,0,.16)!important; background:#14161c!important; } html[data-color-theme="light"] body.ke-site .beforeafter .transformation-panel>.transformation-compare{ border-color:rgba(56,46,37,.14)!important; box-shadow:0 20px 48px rgba(75,57,38,.13)!important; background:#f3eadc!important; } html[data-color-theme="light"] body.ke-site .beforeafter .transformation-workspace, html[data-color-theme="light"] body.ke-site .beforeafter .transformation-stage, html[data-color-theme="light"] body.ke-site .beforeafter .transformation-panel{ outline:0!important; } html[data-color-theme="light"] body.ke-site .story>.container>.eyebrow, html[data-color-theme="light"] body.ke-site .beforeafter .transformations-heading .eyebrow{ color:#c76c22!important; } html[data-color-theme="light"] body.ke-site .story>.container>h2, html[data-color-theme="light"] body.ke-site .beforeafter .transformations-heading h2{ color:#1f2027!important; text-shadow:none!important; } html[data-color-theme="light"] body.ke-site .beforeafter .transformations-heading>p{ color:#57585f!important; } @media(max-width:600px){ html body.ke-site .beforeafter .transformation-panel{padding-bottom:var(--ke268-beforeafter-floor-mobile)!important;} } @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ html body.ke-site .beforeafter .transformation-panel{padding-bottom:var(--ke268-beforeafter-floor-landscape)!important;} } /* V2.1.1 — Card Spacing & Radius Authority Premium One visible card, one radius authority, and non-negotiable vertical breathing around the large public photographic cards. This block is deliberately last so legacy compact rules cannot collapse the spacing again. */ :root{ --ke269-card-radius:10px; --ke269-card-inner-radius:8px; --ke269-section-card-gap:clamp(28px,3.2vw,42px); --ke269-section-card-gap-mobile:22px; --ke269-section-card-gap-landscape:18px; --ke269-card-pad:clamp(22px,2.5vw,30px); --ke269-card-pad-mobile:16px; } /* Precision: the section owns the outside breathing; the photo card owns radius. */ html body.ke-site .precision{ padding:var(--ke269-section-card-gap) var(--ke-ui-gutter)!important; } html body.ke-site .precision .precision-wrap{ margin:0 auto!important; border-radius:var(--ke269-card-radius)!important; overflow:hidden!important; } html body.ke-site .precision .precision-image, html body.ke-site .precision .precision-image img, html body.ke-site .precision .precision-wrap::after{ border-radius:inherit!important; } /* Before/After: the module container is the single visible card authority. */ html body.ke-site .beforeafter{ padding-block:var(--ke269-section-card-gap)!important; } html body.ke-site .beforeafter>.container{ box-sizing:border-box!important; padding:var(--ke269-card-pad)!important; border-radius:var(--ke269-card-radius)!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 20px 48px rgba(0,0,0,.16)!important; } html[data-color-theme="dark"] body.ke-site .beforeafter>.container{ background:linear-gradient(145deg,rgba(15,16,21,.94),rgba(28,29,37,.97))!important; border-color:rgba(255,255,255,.09)!important; } html[data-color-theme="light"] body.ke-site .beforeafter>.container{ background:linear-gradient(145deg,#eee3d1,#e6d7c1)!important; border-color:rgba(60,48,37,.12)!important; box-shadow:0 20px 48px rgba(74,57,35,.12)!important; } html body.ke-site .beforeafter .transformations-heading{ padding:0!important; } html body.ke-site .beforeafter .transformation-workspace{ margin:clamp(22px,3vw,34px) 0 0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; outline:0!important; } html body.ke-site .beforeafter .transformation-stage{ padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; outline:0!important; } html body.ke-site .beforeafter .transformation-panel{ padding:0!important; margin:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } html body.ke-site .beforeafter .transformation-panel>.transformation-compare{ margin:0!important; border-radius:var(--ke269-card-inner-radius)!important; overflow:hidden!important; border:0!important; box-shadow:none!important; } html body.ke-site .beforeafter .transformation-panel>.transformation-compare img{ border-radius:inherit!important; } @media(max-width:600px){ html body.ke-site .precision{ padding:var(--ke269-section-card-gap-mobile) 18px!important; } html body.ke-site .beforeafter{ padding-block:var(--ke269-section-card-gap-mobile)!important; } html body.ke-site .beforeafter>.container{ padding:var(--ke269-card-pad-mobile)!important; border-radius:var(--ke269-card-radius)!important; } } @media(orientation:landscape) and (max-height:520px) and (max-width:960px){ html body.ke-site .precision{ padding:var(--ke269-section-card-gap-landscape) var(--ke-ui-gutter)!important; } html body.ke-site .beforeafter{ padding-block:var(--ke269-section-card-gap-landscape)!important; } html body.ke-site .beforeafter>.container{ padding:14px!important; border-radius:var(--ke269-card-radius)!important; } } /* Theme-specific specificity guard: the inner comparator is an image surface, never a second card, so legacy V2.0.68 shadows must not survive. */ html[data-color-theme="light"] body.ke-site .beforeafter .transformation-panel>.transformation-compare, html[data-color-theme="dark"] body.ke-site .beforeafter .transformation-panel>.transformation-compare{ box-shadow:none!important; border:0!important; } /* V2.1.1 — Public Expertise Heading Authority The descriptive paragraph is removed from markup. On desktop the expertise headline uses the full content width and remains on one deliberate line. */ @media(min-width:900px){ html body.ke-site #expertises .services-head{display:block!important;width:100%!important;} html body.ke-site #expertises .services-head>div{width:100%!important;max-width:none!important;} html body.ke-site #expertises .services-head h2{max-width:none!important;width:100%!important;white-space:nowrap!important;text-wrap:nowrap!important;font-size:clamp(1.65rem,2.8vw,2.35rem)!important;line-height:1.06!important;} } @media(max-width:899px){html body.ke-site #expertises .services-head h2{white-space:normal!important;text-wrap:balance!important;}} /* V2.1.1-r11-r2 — WhatsApp form delivery authority */ .whatsapp-form-status{margin-top:8px;min-height:20px;font-size:.82rem;font-weight:700;line-height:1.35} .whatsapp-form-status[data-state=ready]{opacity:.86} .whatsapp-form-status[data-state=unavailable]{padding:9px 11px;border:1px solid currentColor;border-radius:8px} .whatsapp-submit:disabled{opacity:.58;cursor:not-allowed} /* Electricien Pro visible wordmark: old KechElec logo intentionally retired. */ .electricienpro-brand-wordmark{display:inline-flex;align-items:center;gap:.48rem;font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:inherit;white-space:nowrap}.electricienpro-brand-mark-image{display:block;width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px);object-fit:contain;flex:0 0 auto}.electricienpro-brand-pro{color:#f38b24;font-weight:900}.electricienpro-brand-bolt{color:#f38b24;font-size:1.05em} /* V3 GENERIC DEMO PRESENTATION — visual layer only. The functional voice/translation/session machinery remains untouched. */ .ke-generic-demo .electricienpro-brand-mark-image{display:none!important;} .ke-generic-demo .electricienpro-brand-wordmark{letter-spacing:-.03em;} .ke-generic-demo .hero-v14,.ke-generic-demo .hero-v220{background-image:linear-gradient(135deg,#12141a 0%,#262b35 48%,#111319 100%)!important;} .ke-generic-demo .hero-hard-fallback{display:none!important;} /* V3 Logos R2 — supplied ElectricienPro master marks. Presentation-only layer. */ .electricienpro-brand-wordmark{display:flex;align-items:center;line-height:0;} /* V3 Logos R2 — explicit dual-theme logo authority. Dark surface = white master; light surface = black master. */ .electricienpro-brand-logo-pair{display:block!important;position:relative;line-height:0;} .electricienpro-brand-full-logo{display:block!important;width:min(245px,31vw)!important;height:auto!important;max-height:52px;object-fit:contain;object-position:left center;} .electricienpro-logo-light{display:none!important;} html[data-color-theme="light"] .electricienpro-logo-dark{display:none!important;} html[data-color-theme="light"] .electricienpro-logo-light{display:block!important;} .footer .electricienpro-brand-full-logo{width:min(275px,34vw)!important;max-height:62px;} @media(max-width:700px){.electricienpro-brand-full-logo{width:min(190px,52vw)!important;max-height:42px;}.footer .electricienpro-brand-full-logo{width:min(215px,60vw)!important;max-height:48px;}} /* ========================================================================== V3 GENERIC DEMO — LOGOS R3 / HERO RESPONSIVE AUTHORITY Presentation-only. No voice, translation, session or orchestration logic. ========================================================================== */ /* --- One universal master logo: identical on light and dark surfaces. --- */ .ke-generic-demo .electricienpro-brand-logo-pair{ display:block!important; position:relative!important; width:auto!important; height:80px!important; line-height:0!important; flex:0 0 auto!important; } .ke-generic-demo .electricienpro-brand-full-logo{ display:block!important; width:auto!important; height:80px!important; max-height:none!important; max-width:calc(100vw - 72px)!important; object-fit:contain!important; object-position:left center!important; } .ke-generic-demo .electricienpro-logo-dark, .ke-generic-demo .electricienpro-logo-light{ display:block!important; } .ke-generic-demo .header{ height:96px!important; } .ke-generic-demo .footer .electricienpro-brand-logo-pair{ height:80px!important; } .ke-generic-demo .footer .electricienpro-brand-full-logo{ width:auto!important; height:80px!important; max-height:none!important; } /* The universal master is also the only public-site logo asset. */ .ke-generic-demo .electricienpro-brand-full-logo{ border-radius:0!important; box-shadow:none!important; } /* --- Hero copy: natural flow, no fixed text rows, no overlap. --- */ .ke-generic-demo .hero-v220 .hero-story-deck{ min-height:31rem!important; height:31rem!important; max-width:min(76rem,92vw)!important; } .ke-generic-demo .hero-v220 .hero-story{ min-height:31rem!important; height:31rem!important; grid-template-rows:auto auto auto auto!important; align-content:start!important; row-gap:.72rem!important; } .ke-generic-demo .hero-v220 .hero-story h2{ max-width:22ch!important; margin:0!important; overflow:visible!important; text-wrap:balance!important; overflow-wrap:anywhere!important; } .ke-generic-demo .hero-v220 .hero-story-copy{ max-width:45ch!important; margin:0!important; overflow:visible!important; text-wrap:pretty!important; overflow-wrap:anywhere!important; } .ke-generic-demo .hero-v220 .hero-story .actions{ margin:0!important; } /* Portrait phones: let the hero content breathe instead of forcing text into fixed-height grid rows. */ @media(max-width:700px){ .ke-generic-demo .header{ height:96px!important; } .ke-generic-demo .header-inner{ min-height:96px!important; } .ke-generic-demo .electricienpro-brand-logo-pair, .ke-generic-demo .electricienpro-brand-full-logo{ height:80px!important; } .ke-generic-demo .electricienpro-brand-full-logo{ max-width:calc(100vw - 68px)!important; } .ke-generic-demo .hero-v220{ min-height:760px!important; } .ke-generic-demo .hero-v220 .hero-content{ padding-top:calc(96px + 2.8rem)!important; padding-bottom:4.8rem!important; } .ke-generic-demo .hero-v220 .hero-story-deck{ min-height:31rem!important; height:31rem!important; } .ke-generic-demo .hero-v220 .hero-story{ min-height:31rem!important; height:31rem!important; grid-template-rows:auto auto auto auto!important; row-gap:.68rem!important; } .ke-generic-demo .hero-v220 .hero-story h2{ max-width:19ch!important; font-size:clamp(1.95rem,8.8vw,2.7rem)!important; line-height:1.02!important; letter-spacing:-.035em!important; } .ke-generic-demo .hero-v220 .hero-story-copy{ max-width:36ch!important; font-size:.88rem!important; line-height:1.38!important; } .ke-generic-demo .hero-v220 .hero-story .actions{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important; gap:.45rem!important; align-content:start!important; } .ke-generic-demo .hero-v220 .hero-story .actions .btn{ width:100%!important; min-height:44px!important; height:44px!important; } } /* Short portrait screens: preserve the no-overlap contract. */ @media(max-width:700px) and (max-height:760px){ .ke-generic-demo .hero-v220{ min-height:700px!important; } .ke-generic-demo .hero-v220 .hero-content{ padding-top:calc(96px + 1.8rem)!important; padding-bottom:3.8rem!important; } .ke-generic-demo .hero-v220 .hero-story-deck, .ke-generic-demo .hero-v220 .hero-story{ min-height:28rem!important; height:28rem!important; } .ke-generic-demo .hero-v220 .hero-story h2{ font-size:clamp(1.72rem,8.2vw,2.25rem)!important; } .ke-generic-demo .hero-v220 .hero-story-copy{ font-size:.82rem!important; } } /* Keep the universal logo compact inside the non-public workspaces. The public-site 80px authority above is intentionally not propagated into the compact PWA/client/artisan/admin headers. */ /* ========================================================================== 2.1.1-r11-r8-r5 — CUMULATIVE BRAND / WATERMARK / MAP PRESENTATION AUTHORITY Exact user-supplied assets. No filter, no synthetic inversion, no cropping. ========================================================================== */ .ke-generic-demo .electricienpro-header-logo-pair, .ke-generic-demo .electricienpro-footer-logo-pair{display:block!important;position:relative!important;line-height:0!important;width:auto!important;overflow:visible!important;} .ke-generic-demo .electricienpro-header-logo-pair{height:64px!important;} .ke-generic-demo .electricienpro-footer-logo-pair{height:96px!important;} .ke-generic-demo .electricienpro-header-logo, .ke-generic-demo .electricienpro-footer-logo{position:absolute!important;inset:0 auto auto 0!important;width:auto!important;height:100%!important;max-width:min(100%,520px)!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;border-radius:0!important;box-shadow:none!important;filter:none!important;} .ke-generic-demo .electricienpro-logo-light{display:none!important;} .ke-generic-demo .electricienpro-logo-dark{display:block!important;} html[data-color-theme="light"] .ke-generic-demo .electricienpro-logo-dark{display:none!important;} html[data-color-theme="light"] .ke-generic-demo .electricienpro-logo-light{display:block!important;} .ke-generic-demo .footer .electricienpro-footer-logo{object-position:left center!important;} @media(max-width:700px){ .ke-generic-demo .electricienpro-header-logo-pair{height:54px!important;max-width:220px!important;} .ke-generic-demo .electricienpro-footer-logo-pair{height:82px!important;max-width:300px!important;} .ke-generic-demo .electricienpro-header-logo,.ke-generic-demo .electricienpro-footer-logo{max-width:100%!important;} } /* Premium watermark authority: always show the COMPLETE mark inside the module. The pseudo-element stays inside the content box; no negative inset and no cover scaling. */ .ke-site .intro,.ke-site .testimonial{overflow:hidden!important;} .ke-site .intro::before,.ke-site .testimonial::before{ inset:clamp(24px,4vw,54px)!important; width:auto!important;height:auto!important; background-position:center!important; background-repeat:no-repeat!important; background-size:contain!important; opacity:.075!important; transform:none!important; } html[data-color-theme="light"] .ke-site .intro::before, html[data-color-theme="light"] .ke-site .testimonial::before{opacity:.065!important;} html[data-color-theme="dark"] .ke-site .intro::before, html[data-color-theme="dark"] .ke-site .testimonial::before{opacity:.07!important;} @media(max-width:700px){ .ke-site .intro::before,.ke-site .testimonial::before{ inset:20px 18px!important; background-size:contain!important; background-position:center!important; opacity:.06!important; } } /* ========================================================= R8-R4 — BRAND LOGO GEOMETRY AUTHORITY The light/dark logo pair owns a real layout box. Theme variants are mutually exclusive and never absolutely remove parent width. ========================================================= */ .ke-generic-demo .electricienpro-brand-wordmark{ display:flex!important; align-items:center!important; min-width:0!important; line-height:0!important; } .ke-generic-demo .electricienpro-header-logo-pair, .ke-generic-demo .electricienpro-footer-logo-pair{ display:block!important; position:relative!important; width:min(300px,42vw)!important; max-width:100%!important; height:auto!important; overflow:visible!important; line-height:0!important; flex:0 1 auto!important; } .ke-generic-demo .electricienpro-footer-logo-pair{ width:min(360px,86vw)!important; } .ke-generic-demo .electricienpro-header-logo, .ke-generic-demo .electricienpro-footer-logo{ position:static!important; inset:auto!important; display:none!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; object-fit:contain!important; object-position:left center!important; border-radius:0!important; box-shadow:none!important; filter:none!important; } .ke-generic-demo .electricienpro-logo-dark{display:block!important;} .ke-generic-demo .electricienpro-logo-light{display:none!important;} html[data-color-theme="light"] .ke-generic-demo .electricienpro-logo-dark{display:none!important;} html[data-color-theme="light"] .ke-generic-demo .electricienpro-logo-light{display:block!important;} @media(max-width:700px){ .ke-generic-demo .electricienpro-header-logo-pair{width:min(210px,58vw)!important;} .ke-generic-demo .electricienpro-footer-logo-pair{width:min(290px,86vw)!important;} } /* SEO CONTENT & INTERNAL LINKING FOUNDATION V1 */ .seo-discovery{padding:56px 0;background:var(--surface,#f7f5ef)}.seo-discovery-head{max-width:780px;margin-bottom:22px}.seo-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.seo-discovery-card{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:20px;border:1px solid rgba(127,127,127,.24);border-radius:14px;background:var(--card,#fff);color:inherit;text-decoration:none}.seo-discovery-card span{opacity:.76}.seo-discovery-card b{margin-top:auto}.seo-discovery-more{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}@media(max-width:760px){.seo-discovery-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.seo-discovery-grid{grid-template-columns:1fr}} .seo-inline-link,.transformation-detail-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.65rem;font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:3px}.transformation-detail-link{position:absolute;right:14px;bottom:14px;z-index:6;background:rgba(255,255,255,.94);color:#111;padding:8px 11px;border-radius:10px;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.12)}.transformation-panel{position:relative} /* 2.1.1-r11-r8-r8-r3 PUBLIC SHELL & MULTILINGUAL HOMEPAGE PARITY V1 */ .ke-shell-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto} .ke-shell-controls .lang-switcher{min-width:0} .ke-shell-controls .lang-trigger{min-width:86px} @media(max-width:1049px){ .nav.open{border-radius:14px!important;overflow:visible!important;padding:12px!important;gap:4px!important} .nav.open>a{width:100%;padding:10px 10px!important;border-radius:8px} .nav .ke-shell-controls{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;gap:8px;width:100%;align-items:center;margin-top:4px} .nav .ke-shell-controls .lang-switcher{width:100%;min-width:0} .nav .ke-shell-controls .lang-trigger{width:100%;min-width:0;height:42px;padding:0 12px!important} .nav .ke-shell-controls .theme-switch{width:44px;height:42px;margin:0!important} } @media(max-width:480px){.nav.open{left:10px!important;right:10px!important;width:auto!important;border-radius:14px!important}} /* 2.1.1-r11-r8-r8-r3-r2 — PUBLIC SEO DISCOVERY VISIBILITY AUTHORITY Public crawlable discovery content is human-facing: no technical labels and guaranteed contrast. */ html[data-color-theme="dark"] .seo-discovery{background:#15121b;color:#fff9ed} html[data-color-theme="dark"] .seo-discovery .seo-discovery-head h2, html[data-color-theme="dark"] .seo-discovery .seo-discovery-head p, html[data-color-theme="dark"] .seo-discovery-card strong, html[data-color-theme="dark"] .seo-discovery-card span, html[data-color-theme="dark"] .seo-discovery-card b{color:#fff9ed!important;opacity:1} html[data-color-theme="dark"] .seo-discovery-card{background:#201b27!important;border-color:rgba(255,249,237,.18)!important;color:#fff9ed!important} html[data-color-theme="light"] .seo-discovery{background:#f7f4ed!important;color:#1d1923!important} html[data-color-theme="light"] .seo-discovery .seo-discovery-head h2, html[data-color-theme="light"] .seo-discovery .seo-discovery-head p, html[data-color-theme="light"] .seo-discovery-card strong, html[data-color-theme="light"] .seo-discovery-card span, html[data-color-theme="light"] .seo-discovery-card b{color:#1d1923!important;opacity:1} html[data-color-theme="light"] .seo-discovery-card{background:#ffffff!important;border-color:rgba(29,25,35,.18)!important;color:#1d1923!important} html[data-color-theme="light"] .seo-discovery-card:hover, html[data-color-theme="light"] .seo-discovery-card:focus-visible{border-color:rgba(255,74,31,.62)!important;box-shadow:0 10px 28px rgba(29,25,35,.10)}