:root {
	/* Design tokens — adjust per project. */
	--color-bg: #ffffff;
	--color-fg: #15171a;
	--color-muted: #5b6470;
	--color-accent: #2f6df6;
	--color-accent-ink: #1b3f9e;
	--color-border: #e6e8ec;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-heading: var(--font-sans);

	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
	--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--step-2: clamp(1.44rem, 1.25rem + 0.95vw, 2rem);
	--step-3: clamp(1.73rem, 1.4rem + 1.6vw, 2.66rem);
	--step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);

	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1.25rem;
	--space-lg: 2rem;
	--space-xl: 3.5rem;

	--radius: 12px;
	--shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 8px 24px rgba(20, 23, 26, 0.08);
	--transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--container: 72rem;
}

/* Modern reset */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--color-fg);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-family: var(--font-heading); }
p, li { text-wrap: pretty; }

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--transition); }
a:hover { color: var(--color-accent-ink); }

/* Visible, accessible focus */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* Layout */
.container { width: min(100% - 2 * var(--space-md), var(--container)); margin-inline: auto; padding-block: var(--space-lg); }
.site-footer__inner { width: min(100% - 2 * var(--space-md), var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); flex-wrap: wrap; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, white)); z-index: 101; transition: width 100ms linear; }

/* Floating pill header */
.site-header { position: sticky; top: 0; z-index: 50; padding-block: var(--space-sm); }
.nav-pill { width: min(100% - 2 * var(--space-md), var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 75%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--color-border); box-shadow: 0 1px 2px rgba(20,23,26,0.04); transition: box-shadow var(--transition), padding var(--transition); }
.site-header.is-scrolled .nav-pill { box-shadow: 0 16px 40px -14px rgba(20,23,26,0.35); }

.site-title { font-size: var(--step-1); }
.site-title a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.55em; }
.site-title__mark { width: 0.8em; height: 0.8em; flex-shrink: 0; background: var(--color-accent); border-radius: 3px; transform: rotate(45deg); }

/* Icons (inline SVG, no icon font) */
.icon { width: 1.3em; height: 1.3em; flex-shrink: 0; }

.site-nav { position: relative; }
.site-nav__indicator { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); opacity: 0; transform: translateX(0); width: 0; transition: transform 320ms cubic-bezier(.22,.85,.32,1), width 320ms cubic-bezier(.22,.85,.32,1), opacity 200ms ease; pointer-events: none; z-index: 0; }
.site-nav__indicator.is-active { opacity: 1; }
.site-nav__list,
.footer-nav__list { list-style: none; padding: 0; display: flex; gap: var(--space-xs); flex-wrap: wrap; position: relative; z-index: 1; }
.site-nav__list a { text-decoration: none; padding: 0.55em 1em; border-radius: 999px; display: inline-block; transition: color var(--transition); }
.site-nav__list .current-menu-item > a { color: var(--color-accent-ink); font-weight: 600; }
.site-nav__list .button--cta a { padding: 0.55em 1.1em; background: var(--color-accent); color: #fff; }
.site-nav__list .button--cta a:hover { background: var(--color-accent-ink); }

/* Mobile nav toggle (hamburger -> X) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; flex-shrink: 0; }
.nav-toggle:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.nav-toggle__bar { width: 1.15rem; height: 2px; background: var(--color-fg); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile menu overlay */
.mobile-nav { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-bg) 97%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0ms linear 320ms; }
.mobile-nav.is-open { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0ms; }
.mobile-nav__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); text-align: center; }
.mobile-nav__list a { font-size: var(--step-3); font-weight: 600; text-decoration: none; color: var(--color-fg); display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease, color var(--transition); }
.mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: none; }
.mobile-nav__list li:nth-child(1) a { transition-delay: 70ms; }
.mobile-nav__list li:nth-child(2) a { transition-delay: 120ms; }
.mobile-nav__list li:nth-child(3) a { transition-delay: 170ms; }
.mobile-nav__list li:nth-child(4) a { transition-delay: 220ms; }
.mobile-nav__list li:nth-child(5) a { transition-delay: 270ms; }
.mobile-nav__list li:nth-child(6) a { transition-delay: 320ms; }
.mobile-nav__list li:nth-child(7) a { transition-delay: 370ms; }
.mobile-nav__list .current-menu-item > a { color: var(--color-accent); }
html.nav-open { overflow: hidden; }

@media (max-width: 760px) {
	.site-nav { display: none; }
	.nav-toggle { display: flex; }
}
@media (min-width: 761px) {
	.mobile-nav { display: none; }
}

/* Cards grid — intrinsically responsive, no media query needed */
.post-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

.card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 280ms ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__media--placeholder { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)), color-mix(in srgb, var(--color-accent) 4%, var(--color-bg))); }
.card__media--placeholder .icon { width: 2.25rem; height: 2.25rem; color: var(--color-accent); }
.card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.entry-meta { color: var(--color-muted); font-size: var(--step--1); }
.card__link { margin-top: auto; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35em; }
.card__link::after { content: "\2192"; transition: transform var(--transition); }
.card__link:hover::after { transform: translateX(3px); }

/* Content */
.entry-content > * + * { margin-top: var(--space-md); }
.entry-thumbnail { margin-block: var(--space-md); border-radius: var(--radius); overflow: hidden; }

/* Forms */
.search-field { padding: 0.6em 0.8em; border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); }
.search-field:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.15); outline: none; }
.search-submit,
.button { display: inline-block; padding: 0.6em 1.1em; border: 0; border-radius: var(--radius); background: var(--color-accent); color: #fff; font-weight: 600; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.search-submit:hover,
.button:hover { background: var(--color-accent-ink); }
.search-submit:active,
.button:active { transform: translateY(1px); }
.button--ghost { background: transparent; color: var(--color-fg); border: 1px solid var(--color-border); }
.button--ghost:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent); }

/* Home: bento grid */
.bento-section { background: color-mix(in srgb, var(--color-fg) 3.5%, var(--color-bg)); padding-block: var(--space-xl); border-radius: 0 0 2.5rem 2.5rem; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); grid-auto-flow: row dense; gap: var(--space-md); }

.bento-tile { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 22px; padding: var(--space-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
a.bento-tile:hover { color: inherit; }

.bento-tile--hero { grid-column: span 3; grid-row: span 2; justify-content: center; }
.bento-tile--hero .bento-tile__content { position: relative; z-index: 1; }
.bento-tile--hero h1 { font-size: var(--step-4); }
.bento-tile--hero .hero__subtitle { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--step-1); max-width: 34rem; }
.bento-tile--hero .hero__cta { margin-top: var(--space-lg); display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 1em; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); color: var(--color-accent-ink); font-weight: 600; font-size: var(--step--1); margin-bottom: var(--space-md); }
.hero__badge-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-accent); }
.hero__blob { position: absolute; z-index: 0; width: 22rem; height: 22rem; top: -6rem; right: -6rem; border-radius: 62% 38% 30% 70% / 58% 32% 68% 42%; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, #1a1a2e)); filter: blur(70px); opacity: 0.25; pointer-events: none; }

.bento-tile--pricing { grid-column: span 1; justify-content: space-between; }
.bento-tile__label { font-size: var(--step--1); color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.bento-tile__figure { font-size: var(--step-3); font-weight: 600; margin-top: var(--space-sm); }
.bento-tile__figure-unit { font-size: var(--step-0); color: var(--color-muted); font-weight: 400; }
.bento-tile__link { margin-top: var(--space-md); font-weight: 600; display: inline-flex; align-items: center; gap: 0.35em; }
.bento-tile__link::after { content: "\2192"; transition: transform var(--transition); }
.bento-tile:hover .bento-tile__link::after { transform: translateX(3px); }

.bento-tile--photo { grid-column: span 1; padding: 0; justify-content: flex-end; min-height: 150px; }
.bento-tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bento-tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0) 55%); z-index: 1; }
.bento-tile__overlay { position: relative; z-index: 2; color: #fff; font-weight: 600; padding: var(--space-md); }

.bento-tile--usp { grid-column: span 1; gap: var(--space-sm); }
.bento-tile--usp p { font-weight: 600; font-size: var(--step--1); margin-top: auto; }
.usp-band__icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg)); color: var(--color-accent); }

.bento-tile--refs { grid-column: span 2; background: var(--color-accent); color: #fff; border-color: var(--color-accent); justify-content: space-between; }
.bento-tile--refs .bento-tile__label { color: color-mix(in srgb, #fff 75%, transparent); }
.bento-tile--refs .bento-tile__headline { font-size: var(--step-2); font-weight: 600; margin-top: var(--space-sm); }
.bento-tile--refs .bento-tile__link { margin-top: var(--space-md); }

.bento-tile--conseils { grid-column: span 2; }
.bento-tile--conseils.bento-tile--full { grid-column: span 4; }
.bento-tile__list { list-style: none; padding: 0; margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.bento-tile__list a { text-decoration: none; font-weight: 600; }
.bento-tile__list a:hover { color: var(--color-accent); }

@media (max-width: 900px) {
	.bento-grid { grid-template-columns: repeat(2, 1fr); }
	.bento-tile--hero { grid-column: span 2; grid-row: auto; }
	.bento-tile--pricing, .bento-tile--photo { grid-column: span 1; }
}
@media (max-width: 600px) {
	.bento-grid { grid-template-columns: 1fr; }
	.bento-tile,
	.bento-tile--hero,
	.bento-tile--pricing,
	.bento-tile--photo,
	.bento-tile--usp,
	.bento-tile--refs,
	.bento-tile--conseils,
	.bento-tile--conseils.bento-tile--full { grid-column: span 1; grid-row: auto; }
}

/* Sets de table: product intro with illustration */
.product-intro { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: center; margin-top: var(--space-md); }
.product-intro__visual { max-width: 18rem; margin-inline: auto; }
.illustration-placemat { width: 100%; height: auto; }

/* Full-bleed photo band with caption overlay (used on Sets de table / Fiche technique) */
.photo-band { position: relative; margin-block: var(--space-xl); min-height: 22rem; display: flex; align-items: flex-end; border-radius: var(--radius); overflow: hidden; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0) 60%); z-index: 1; }
.photo-band__caption { position: relative; z-index: 2; color: #fff; padding: var(--space-lg); font-size: var(--step-1); font-weight: 600; max-width: 34rem; }

/* A11y utilities */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--color-fg); color: #fff; padding: 0.6em 1em; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-xl); }
.site-footer__brand { color: var(--color-muted); font-size: var(--step--1); width: 100%; }
.site-footer__brand a { color: inherit; }
.site-footer__copyright { color: var(--color-muted); font-size: var(--step--1); }
.site-footer__contact { display: flex; gap: var(--space-md); flex-wrap: wrap; font-size: var(--step--1); }
.site-footer__contact a { color: inherit; text-decoration: none; font-weight: 600; }

/* Pricing table (Sets de table) */
.pricing-table { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); }
.pricing-table th, .pricing-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); }
.pricing-table th { font-size: var(--step--1); color: var(--color-muted); font-weight: 600; }
.pricing-table tr.is-featured td { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); font-weight: 600; }
.pricing-table__badge { display: inline-block; margin-right: 0.6em; padding: 0.15em 0.6em; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: var(--step--1); font-weight: 600; }
.pricing-cta { margin-top: var(--space-lg); }

/* Fiche technique */
.spec-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-top: var(--space-lg); }
.spec-card { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); transition: box-shadow var(--transition), transform var(--transition); }
.spec-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.spec-card h2 { font-size: var(--step-0); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); }
.spec-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg)); color: var(--color-accent); padding: 0.5rem; flex-shrink: 0; }
.spec-card ul { padding-left: 1.1em; }

/* References portfolio */
.card--reference .card__logo { max-height: 2.5rem; width: auto; margin-bottom: var(--space-xs); }
.reference-logo { max-height: 3rem; width: auto; margin-bottom: var(--space-sm); }
.reference-quote { border-left: 3px solid var(--color-accent); padding-left: var(--space-md); margin-block: var(--space-lg); font-style: italic; color: var(--color-muted); }
.archive-header { margin-bottom: var(--space-lg); }

/* Devis form */
.devis-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full, .form-submit { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { padding: 0.6em 0.8em; border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.15); outline: none; }
.form-notice { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); margin-top: var(--space-md); }
.form-notice--success { background: #e7f6ec; color: #1e6b3a; }
.form-notice--error { background: #fbe9e7; color: #a33327; }

/* Scroll reveal (progressive enhancement, class added by main.js) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 550ms ease, transform 550ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}