/*
Theme Name: BizzKeys
Theme URI: https://www.bizzkeys.com
Author: Ralph Coomans
Description: Theme sur-mesure pour BizzKeys - conseil, developpement et gestion de projet Business Central et Dolibarr.
Version: 0.1.0
Text Domain: bizzkeys
*/

:root{
	--ink:#16212B;
	--ink-soft:#3E4C58;
	--paper:#F2F4F5;
	--surface:#FFFFFF;
	--line:#CDD5DA;
	--accent:#2454C7;
	--accent-soft:#E7EDFB;
	--doli:#BA4A1F;
	--doli-soft:#F7E9E1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
	font-size:17px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
	font-family:"IBM Plex Serif", Georgia, serif;
	font-weight:700;
	color:var(--ink);
	margin:0 0 0.5em;
	line-height:1.15;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}

/* ---- Header ---- */
.site-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
	max-width:1080px;
	margin:0 auto;
	padding:22px clamp(20px,4vw,48px);
}
.site-header a.site-logo{display:block;line-height:0;margin-left:-48px;}
.site-header a.site-logo img{height:64px;width:auto;display:block;}
.main-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.main-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;}
.main-nav a{color:var(--ink-soft);font-weight:500;font-size:0.95rem;}
.main-nav a:hover{color:var(--accent);text-decoration:none;}
.lang-switch{display:flex;gap:10px;margin:0 0 0 6px;padding:0;list-style:none;}
.lang-switch a{
	font-family:"IBM Plex Sans";
	font-size:0.8rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.04em;
	color:var(--ink-soft);
	padding:3px 8px;
	border:1px solid var(--line);
	border-radius:6px;
	display:inline-block;
}
.lang-switch li.current-lang a{color:var(--accent);border-color:var(--accent);}
.lang-switch a:hover{text-decoration:none;color:var(--accent);}

/* ---- Buttons ---- */
.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--accent);
	color:#fff;
	font-weight:600;
	font-size:0.95rem;
	padding:12px 22px;
	border-radius:8px;
}
.btn:hover{background:#1c41a0;text-decoration:none;color:#fff;}
.btn.outline{
	background:transparent;
	color:var(--ink);
	border:1px solid var(--line);
}
.btn.outline:hover{border-color:var(--accent);color:var(--accent);}
.btn.doli{background:var(--doli);}
.btn.doli:hover{background:#8f3a16;}

/* ---- Hero (home) ---- */
.hero{padding:56px 0 24px;}
.hero .eyebrow{
	font-size:0.78rem;
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--accent);
	display:block;
	margin-bottom:14px;
}
.hero h1{font-size:clamp(2rem,4vw,2.8rem);max-width:18ch;}
.hero p.lede{max-width:60ch;color:var(--ink-soft);font-size:1.1rem;margin:16px 0 28px;}

/* ---- Product cards (home) ---- */
.product-cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:20px;
	margin:40px 0;
}
.product-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:12px;
	padding:28px;
}
.product-card .product-icon{width:40px;height:40px;border-radius:9px;margin-bottom:14px;display:block;}
.product-card .tag{
	display:inline-block;
	font-size:0.72rem;
	font-weight:700;
	letter-spacing:0.06em;
	text-transform:uppercase;
	padding:4px 10px;
	border-radius:6px;
	margin-bottom:14px;
}
.product-card.bc .tag{color:var(--accent);background:var(--accent-soft);}
.product-card.doli .tag{color:var(--doli);background:var(--doli-soft);}
.product-card h2{font-size:1.4rem;margin-bottom:10px;}
.product-card p{color:var(--ink-soft);margin:0 0 18px;}

.services-teaser{padding:24px 0 56px;border-top:1px solid var(--line);margin-top:16px;}
.services-teaser h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);font-family:"IBM Plex Sans";font-weight:600;margin-bottom:18px;}
.services-teaser ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;}
.services-teaser li{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:8px;
	padding:9px 16px;
	font-size:0.9rem;
	font-weight:500;
}

/* ---- Product page (BC / Dolibarr) ---- */
.product-hero{padding:52px 0 8px;}
.product-hero-head{display:flex;align-items:center;gap:18px;margin-bottom:4px;}
.product-hero-head .product-icon{width:56px;height:56px;border-radius:12px;flex-shrink:0;}
.product-hero-head .eyebrow{margin-bottom:6px;}
.product-hero .eyebrow{
	font-size:0.78rem;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	display:inline-block;
	padding:4px 10px;
	border-radius:6px;
	margin-bottom:16px;
}
.page-bc .product-hero .eyebrow{color:var(--accent);background:var(--accent-soft);}
.page-doli .product-hero .eyebrow{color:var(--doli);background:var(--doli-soft);}
.product-hero h1{font-size:clamp(1.9rem,3.6vw,2.5rem);}
.product-hero p.lede{max-width:62ch;color:var(--ink-soft);font-size:1.08rem;margin:14px 0 8px;}

.services-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:16px;
	margin:36px 0 48px;
}
.service-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:10px;
	padding:22px;
}
.service-card .idx{
	font-family:"IBM Plex Serif";
	font-weight:700;
	font-size:0.85rem;
	margin-bottom:10px;
	display:inline-block;
}
.page-bc .service-card .idx{color:var(--accent);}
.page-doli .service-card .idx{color:var(--doli);}
.service-card h3{font-size:1.05rem;margin-bottom:8px;}
.service-card p{margin:0;color:var(--ink-soft);font-size:0.92rem;}

.product-cta{
	padding:36px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:12px;
	margin-bottom:56px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
}
.product-cta p{margin:0;font-size:1.05rem;color:var(--ink);font-weight:500;}

/* ---- Contact ---- */
.contact-section{padding:52px 0 64px;}
.contact-section h1{font-size:clamp(1.9rem,3.6vw,2.5rem);}
.contact-section p.lede{max-width:60ch;color:var(--ink-soft);font-size:1.08rem;margin:14px 0 32px;}
.contact-form-wrap{
	max-width:600px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:12px;
	padding:32px;
}
.contact-form-wrap p{margin:0 0 14px;}
.contact-form-wrap label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;color:var(--ink);}
.contact-form-wrap input[type=text],
.contact-form-wrap input[type=email],
.contact-form-wrap textarea{
	width:100%;
	padding:10px 12px;
	border:1px solid var(--line);
	border-radius:8px;
	font-family:inherit;
	font-size:0.95rem;
	background:var(--paper);
	color:var(--ink);
}
.contact-form-wrap textarea{min-height:120px;}
.contact-form-wrap input[type=submit]{
	background:var(--accent);
	color:#fff;
	border:none;
	font-weight:600;
	font-size:0.95rem;
	padding:12px 22px;
	border-radius:8px;
	cursor:pointer;
}
.contact-form-wrap input[type=submit]:hover{background:#1c41a0;}
.contact-email{margin-top:20px;font-size:0.92rem;color:var(--ink-soft);}

/* ---- Footer ---- */
.site-footer{
	border-top:1px solid var(--line);
	margin-top:24px;
	padding:24px clamp(20px,4vw,48px);
	max-width:1080px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	font-size:0.85rem;
	color:var(--ink-soft);
}