/*
Theme Name: Keyprog
Theme URI: https://www.keyprog.fr
Author: Keyprog
Description: Thème WooCommerce rapide et optimisé SEO pour Keyprog : clés automobiles, émulateurs, réparation électronique.
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 8.0
License: GNU General Public License v2 or later
Text Domain: keyprog
*/
:root{--bg:#F4F5FB;--card:#fff;--ink:#14142B;--mute:#5B5F7A;--line:#E1E3F1;--dark:#0E0D2B;--dark2:#191845;--dark3:#26256E;--acc:#4F46E5;--acc2:#4338CA;--accl:#A5B4FC;--tint:#EEF0FF;--r:14px;--sh:0 1px 2px rgba(20,20,60,.05),0 10px 26px -12px rgba(60,55,170,.25);--hf:Bahnschrift,"DIN Alternate","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);overflow-x:clip}
img{max-width:100%;height:auto}a{color:inherit}table{max-width:100%}
h1,h2,h3{font-family:var(--hf);line-height:1.12;margin:0 0 .5em;letter-spacing:.005em}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--acc);color:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.hero :focus-visible,.top :focus-visible,.nav :focus-visible,.ft :focus-visible,.svc :focus-visible{outline-color:var(--accl)}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* barre du haut + en-tête */
.top{background:var(--dark);color:#B9BCE0;font-size:13px}
.top .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.top a{color:#fff;font-weight:700;text-decoration:none}
.hd{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:30}
.bar{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.bar>*{min-width:0}
.brand{font:800 28px var(--hf);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:.05em;color:var(--ink)}
.brand span{color:var(--acc)}.brand b{color:var(--ink)}.brand svg{width:30px;height:30px;color:var(--acc)}
.brand-img{display:flex;align-items:center;flex:0 0 auto}
.brand-img img,.custom-logo{max-height:56px;max-width:210px;width:auto;height:auto;display:block}
.bar form{flex:1;display:flex;max-width:520px;margin:0 auto;position:relative}
.bar input[type=search]{flex:1 1 auto;width:1%;min-width:0;height:46px;border:2px solid var(--acc);border-right:0;border-radius:10px 0 0 10px;background:#fff;color:var(--ink);padding:0 14px;font:inherit}
.bar form button{flex:0 0 52px;width:52px;height:46px;padding:0;font-size:0;color:transparent;border:2px solid var(--acc);border-left:0;border-radius:0 10px 10px 0;cursor:pointer;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center/22px no-repeat}
.bar form button:hover{background-color:var(--acc2)}
.bar a.l{text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;color:var(--ink)}.bar a.l:hover{color:var(--acc)}
.bar a.cartl{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;background:var(--acc);color:#fff;border-radius:10px;padding:10px 14px}
.bar a.cartl:hover{background:var(--acc2);color:#fff}
.cartl svg{width:20px;height:20px;flex:0 0 20px}
.dmk-n{background:#fff;color:var(--acc2);border-radius:20px;min-width:22px;padding:0 7px;font-size:13px;font-weight:800;text-align:center;line-height:22px}
.burger{display:none;background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}
.nav{background:var(--dark2)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}.nav li{position:relative}
.nav a{display:block;padding:13px 14px;text-decoration:none;font-weight:600;font-size:15px;color:#DCDFF5}
.nav a:hover,.nav .current-menu-item>a,.nav .current-cat>a{color:var(--accl)}
.nav ul ul{display:none;position:absolute;left:0;top:100%;background:var(--dark2);min-width:250px;z-index:20;border-top:2px solid #818CF8;flex-direction:column;align-items:stretch;border-radius:0 0 10px 10px;box-shadow:0 18px 30px -12px rgba(0,0,0,.5)}
.nav li:hover>ul,.nav li:focus-within>ul{display:block}
.acc-m{display:none}

/* boutons */
.button,.woocommerce a.button,.woocommerce button.button,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--acc);color:#fff;font-weight:700;border-radius:10px;padding:.75em 1.4em;border:0;text-decoration:none;display:inline-block;line-height:1.3;cursor:pointer;transition:background .15s,box-shadow .15s}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button:hover{background:var(--acc2);color:#fff;box-shadow:0 10px 20px -10px rgba(79,70,229,.8)}
.button.ghost{background:transparent;color:#fff;border:2px solid #5A58A8;padding:calc(.75em - 2px) 1.4em}.button.ghost:hover{background:transparent;border-color:var(--accl);color:var(--accl);box-shadow:none}

/* hero */
.hero{position:relative;color:#EEF0FF;padding:60px 0 104px;background:radial-gradient(900px 520px at 82% 28%,rgba(99,102,241,.45),transparent 62%),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.04) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.04) 39px 40px),var(--dark);clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%)}
.hg{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.kicker{color:var(--accl);font:700 16px var(--hf);letter-spacing:.03em;margin:0 0 12px}
.hero h1{font-size:clamp(34px,5.2vw,60px);margin-bottom:16px;color:#fff}
.lead{font-size:18px;color:#C4C7EA;max-width:600px;margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 26px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.chips li{border:1px solid #3F3E8F;background:rgba(99,102,241,.12);border-radius:30px;padding:3px 14px;font-size:14px;color:#D7DAF7}
.hero svg{width:100%;max-width:320px;height:auto;justify-self:center;filter:drop-shadow(0 20px 40px rgba(99,102,241,.35))}

/* sections */
section.s{padding:48px 0 8px}
.sh{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:22px}
.sh h2{font-size:clamp(26px,3.4vw,36px);margin:0;padding-left:18px;position:relative}
.sh h2::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:7px;background:var(--acc);border-radius:2px;transform:skewX(-14deg)}
.sh a{font-weight:700;color:var(--acc2);text-decoration:none}.sh a:hover{text-decoration:underline}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.cat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;text-align:center;padding:14px;box-shadow:var(--sh);transition:border-color .15s,transform .15s}
.cat:hover{border-color:var(--acc);transform:translateY(-3px)}
.cat img,.cat .ph{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.cat h3{font-size:19px;margin:10px 0 0;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.seo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;border-top:5px solid var(--acc);box-shadow:var(--sh)}
.seo h2{font-size:30px}.seo h3{font-size:22px;margin-top:1.4em;color:var(--acc2)}
.seo p{max-width:900px}.seo a{color:var(--acc2);font-weight:600}
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.svc{position:relative;background:linear-gradient(160deg,var(--dark3),var(--dark) 75%);color:#EEF0FF;border-radius:var(--r);padding:34px 26px 28px;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;right:0;height:8px;background:repeating-linear-gradient(90deg,#818CF8 0 14px,transparent 14px 20px,#818CF8 20px 26px,transparent 26px 34px)}
.svc small{color:var(--accl);font:700 15px var(--hf);letter-spacing:.03em}
.svc h3{font-size:27px;margin:6px 0 18px;color:#fff}
.svc .button{background:#fff;color:var(--acc2)}.svc .button:hover{background:var(--tint)}
.ban{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ban a{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,var(--dark2),var(--dark3));color:#fff;text-decoration:none;border-radius:var(--r);padding:38px 30px;border-left:8px solid #818CF8;transition:transform .15s}
.ban a:hover{transform:translateY(-3px)}
.ban h3{font-size:30px;margin:0}.ban span{color:var(--accl);font-weight:700}
.rea{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.rea div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;border-bottom:4px solid var(--acc)}
.rea b{display:block;font:700 19px var(--hf)}.rea span{color:var(--mute);font-size:15px}

/* produits */
.woocommerce ul.products,ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px;margin:0 0 30px;padding:0;list-style:none}
ul.products::before,ul.products::after{display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.woocommerce ul.products[class*=columns-] li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;position:relative;box-shadow:var(--sh);transition:border-color .15s,transform .15s}
.woocommerce ul.products li.product:hover{border-color:var(--acc);transform:translateY(-3px)}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.woocommerce ul.products li.product img{aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;width:100%;height:auto;margin:0 0 10px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font:700 16px/1.3 var(--hf);padding:0;min-height:3.9em;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.woocommerce ul.products li.product .star-rating{display:none}
.woocommerce ul.products li.product .price{margin-top:auto;padding-top:8px;font-weight:800;font-size:19px;color:var(--ink)}
.woocommerce ul.products li.product .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:12px 0 0;text-align:center}
.woocommerce ul.products li.product .added_to_cart{display:block;text-align:center;margin-top:8px;font-size:14px;color:var(--acc2)}
.woocommerce span.onsale{background:var(--acc);color:#fff;border-radius:6px;min-height:0;line-height:1.6;padding:0 10px;top:10px;left:10px;right:auto;margin:0}
.woo,.page{padding:26px 20px 60px}
.woocommerce-breadcrumb{font-size:14px;color:var(--mute);margin-bottom:16px!important}
.woocommerce div.product .product_title{font-size:clamp(26px,3.4vw,38px)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-weight:800;font-size:28px}
.woocommerce div.product .single_add_to_cart_button{font-size:18px;padding:.9em 1.8em}
.woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--bg)}
.woocommerce-message,.woocommerce-info{border-top-color:var(--acc)}.woocommerce-message::before,.woocommerce-info::before{color:var(--acc)}
input,select,textarea{font:inherit}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
::selection{background:var(--acc);color:#fff}
.woocommerce .star-rating span::before,.woocommerce p.stars a::before,.woocommerce p.stars a:hover~a::before{color:var(--acc)}
.woocommerce-store-notice,p.demo_store{background:var(--acc)!important;color:#fff}
.woocommerce ul.products li.product .price ins,.woocommerce div.product p.price ins{background:none;color:var(--acc2)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff}
.entry{max-width:860px}.entry h1{font-size:clamp(30px,4vw,44px)}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.post h2{font-size:26px}.post h2 a{text-decoration:none}

/* pied de page */
.ft{background:var(--dark);color:#B9BCE0;margin-top:48px;position:relative;padding-top:78px;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%)}
.fg{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px}
footer.ft .brand,footer.ft .brand b{color:#fff}footer.ft .brand span{color:#6366F1}footer.ft .brand span b{color:#fff}footer.ft .brand svg{color:#6366F1}
.ft h3{color:#fff;font-size:18px}.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:6px 0}.ft a{text-decoration:none}.ft a:hover{color:var(--accl)}
.fb{border-top:1px solid #2A2A66;padding:16px 0;font-size:14px}

/* tablette */
@media(max-width:1024px){.fg{grid-template-columns:1fr 1fr}.hg{grid-template-columns:1.2fr .8fr}}

/* mobile et petite tablette */
@media(max-width:860px){
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px 12px}
.brand-img,.brand{min-width:0;max-width:100%;overflow:hidden}
.brand-img img,.custom-logo{max-width:100%;max-height:44px;object-fit:contain;object-position:left center}
.bar form{grid-column:1/-1;order:5;max-width:none;margin:0}
.bar a.l:not(.cartl){display:none}
.bar a.cartl{padding:10px 12px;gap:6px}
.cart-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.burger{display:block;min-height:44px}
.nav{display:none}.nav.open{display:block}
.nav ul{flex-direction:column;align-items:stretch}
.nav ul ul{position:static;display:block;border:0;padding-left:14px;box-shadow:none}
.nav a{padding:13px 14px}
.acc-m{display:block;padding:13px 14px;color:#DCDFF5;font-weight:600;text-decoration:none;border-top:1px solid #2A2A66}
.top span{display:none}
.hg,.fg{grid-template-columns:1fr}
.hero svg{max-width:190px}
.seo{padding:22px}
}
@media(max-width:767px){
.wrap{padding:0 14px}
.woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.woocommerce ul.products li.product{padding:10px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px}
.woocommerce ul.products li.product .price{font-size:17px}
.woocommerce ul.products li.product .button{font-size:14px;padding:.6em .4em}
.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat h3{font-size:16px}
.hero{padding:34px 0 66px}.lead{font-size:16px}
.cta .button{flex:1 1 100%;text-align:center}
.svc h3{font-size:24px}.ban a{padding:26px 20px}.ban h3{font-size:24px}
.fg{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}