/* ==========================================================================
   SenConnect — feuille de style principale
   Sommaire : 1. Police & variables · 2. Base · 3. Utilitaires · 4. Boutons
   5. En-tête · 6. Hero & visuels · 7. Sections · 8. Composants de sections
   9. Contact & formulaire · 10. Pied de page · 11. Blog & pages
   12. Variante sombre (Cybersécurité) · 13. Animations · 14. Responsive
   ========================================================================== */

/* 1. Police & variables ---------------------------------------------------- */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Couleurs */
	--bg: #ffffff;
	--surface: #ffffff;
	--soft: #f4f6fa;
	--ink: #0a1022;
	--text: #3c4558;
	--muted: #646d80;
	--line: #e6e8ee;
	--line-strong: #d3d8e2;
	--primary: #2952ff;
	--primary-hover: #1f45e6;
	--primary-soft: #eef2ff;
	--primary-200: #dce4ff;
	--link: #2952ff;
	--accent: #19d3a2;
	--accent-ink: #0b7a5e;
	--accent-soft: #e3faf3;
	--night: #0a1022;
	--night-2: #0e1530;
	--night-line: #1c2647;
	--focus: #2952ff;

	/* Formes */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 22px;
	--radius-xl: 32px;
	--shadow: 0 12px 32px -16px rgba(10, 16, 34, 0.22);
	--shadow-lg: 0 30px 60px -28px rgba(10, 16, 34, 0.32);

	/* Mise en page */
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--section: clamp(72px, 9vw, 128px);
	--header-h: 80px;
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);

	/* Typographie */
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
	--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
	--fs-h1: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem);
	--fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Portées sombres : page Cybersécurité, sections et en-têtes sombres. */
.theme-cyber,
.section--dark,
.page-hero--dark {
	--bg: #070b18;
	--surface: #0e1530;
	--soft: #0b1126;
	--ink: #f3f5fa;
	--text: #b7bfd0;
	--muted: #8f98ab;
	--line: #1c2647;
	--line-strong: #2a3558;
	--primary-soft: rgba(41, 82, 255, 0.16);
	--primary-200: rgba(91, 124, 255, 0.45);
	--link: #8fa8ff;
	--accent-ink: #19d3a2;
	--accent-soft: rgba(25, 211, 162, 0.12);
	--focus: #8fa8ff;
	--shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
	--shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}

/* 2. Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--font);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

a {
	color: var(--link);
	text-underline-offset: 3px;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

::selection {
	background: var(--primary);
	color: #fff;
}

:focus-visible {
	outline: 2.5px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

.icon {
	width: 24px;
	height: 24px;
	flex: none;
}

/* 3. Utilitaires ----------------------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(780px + var(--gutter) * 2);
}

.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: 12px;
	top: -80px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--ink);
	color: var(--bg);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: calc(var(--admin-bar) + 12px);
}

.site-main:focus {
	outline: none;
}

.eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--link);
}

.eyebrow--pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px 7px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 14px;
}

.eyebrow--pill .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(25, 211, 162, 0.18);
}

.tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--link);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
}

.admin-hint {
	margin: 28px 0 0;
	padding: 12px 16px;
	border: 1px dashed var(--primary-200);
	border-radius: 12px;
	background: var(--primary-soft);
	color: var(--text);
	font-size: 14px;
}

.check-list {
	display: grid;
	gap: 12px 28px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.check-list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--text);
	font-size: 15.5px;
	line-height: 1.5;
}

.check-list .icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	padding: 3px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-ink);
	stroke-width: 2.4;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.badge {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color 0.2s, color 0.2s;
}

.badge:hover {
	border-color: var(--primary);
	color: var(--link);
}

/* 4. Boutons --------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.4em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.btn .icon {
	width: 1.15em;
	height: 1.15em;
	transition: transform 0.25s var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(3px);
}

.btn--primary {
	background: var(--primary);
	color: #fff;
}

.btn--primary:hover {
	background: var(--primary-hover);
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(41, 82, 255, 0.7);
	transform: translateY(-1px);
}

.btn--ghost {
	border-color: var(--line-strong);
	background: transparent;
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--ink);
	background: var(--surface);
	color: var(--ink);
}

.btn--light {
	background: #fff;
	color: var(--night);
}

.btn--light:hover {
	background: #eef2ff;
	color: var(--night);
	transform: translateY(-1px);
}

.btn--outline-light {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.btn--outline-light:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.btn--whatsapp {
	border-color: var(--line-strong);
	color: var(--ink);
	justify-self: start;
}

.btn--whatsapp .icon {
	color: #1faa59;
}

.btn--whatsapp:hover {
	border-color: #1faa59;
	color: var(--ink);
}

.btn--sm {
	padding: 0.62em 1.1em;
	font-size: 14px;
}

.btn--lg {
	padding: 1em 1.65em;
	font-size: 16px;
}

.btn--block {
	width: 100%;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--link);
	font-weight: 700;
	text-decoration: none;
	transition: gap 0.25s var(--ease);
}

.link-arrow .icon {
	width: 1.1em;
	height: 1.1em;
}

.link-arrow:hover {
	gap: 0.7em;
}

/* 5. En-tête --------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: var(--admin-bar);
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--header-h);
	border-bottom: 1px solid transparent;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	transition: height 0.3s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.site-header.is-scrolled {
	height: 66px;
	border-bottom-color: var(--line);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 28px -22px rgba(10, 16, 34, 0.45);
}

.site-header + .site-main {
	padding-top: var(--header-h);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
}

.site-logo {
	display: inline-flex;
	flex: none;
}

.site-logo img {
	width: auto;
	height: 34px;
	transition: height 0.3s var(--ease);
}

.site-header.is-scrolled .site-logo img {
	height: 30px;
}

.site-nav {
	margin-inline: auto;
}

.menu--primary {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu--primary > li {
	position: relative;
}

.menu--primary > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.menu--primary > li > a:hover {
	background: var(--soft);
	color: var(--ink);
}

.menu--primary > .current-menu-item > a,
.menu--primary > .current-menu-ancestor > a,
.menu--primary > .current_page_item > a {
	color: var(--ink);
}

.menu--primary > .current-menu-item > a::before,
.menu--primary > .current-menu-ancestor > a::before,
.menu--primary > .current_page_item > a::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--primary);
}

.menu--primary .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	opacity: 0.6;
	transform: translateY(-2px) rotate(45deg);
}

.menu--primary .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 290px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0.2s;
}

.menu--primary .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.menu--primary li:hover > .sub-menu,
.menu--primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.menu--primary .sub-menu a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.menu--primary .sub-menu a:hover,
.menu--primary .sub-menu .current-menu-item > a {
	background: var(--soft);
	color: var(--link);
}

.site-nav__footer {
	display: none;
}

.site-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle span {
	display: flex;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none !important;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: flex !important;
}

/* 6. Hero & visuels -------------------------------------------------------- */

.hero {
	position: relative;
	padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px);
	overflow: hidden;
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
}

.hero__title {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 750;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.hero__lead {
	max-width: 600px;
	margin: 26px 0 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.hero__actions,
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 38px;
}

.hero__pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 48px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 650;
}

.hero__pillars li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero__pillar-num {
	color: var(--link);
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.hero__visual,
.page-hero__visual {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin-inline: auto;
}

/* Composition visuelle (accueil et pages). */
.hv {
	position: relative;
	aspect-ratio: 1 / 1;
	container-type: inline-size;
	color: var(--ink);
}

.hv-arcs,
.cta-panel__arcs,
.hv-radar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--primary);
	opacity: 0.4;
	pointer-events: none;
}

.hv-links path {
	stroke: var(--primary);
	opacity: 0.55;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	animation: sc-draw 1.6s 0.5s var(--ease) forwards;
}

.hv-nodes circle {
	fill: var(--surface);
	stroke: var(--primary);
	stroke-width: 1.5;
}

.hv-nodes .hv-core {
	fill: var(--primary);
	stroke: none;
}

.hv-card {
	position: absolute;
	padding: 1.2em;
	border: 1px solid var(--line);
	border-radius: 1.2em;
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	font-size: max(8.5px, 2.25cqw);
	line-height: 1.4;
	animation: sc-rise 0.9s var(--ease) both;
}

.hv > .hv-card:nth-of-type(1) { animation-delay: 0.15s; }
.hv > .hv-card:nth-of-type(2) { animation-delay: 0.3s; }
.hv > .hv-card:nth-of-type(3) { animation-delay: 0.45s; }
.hv > .hv-card:nth-of-type(4) { animation-delay: 0.6s; }

.hv-chrome {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-bottom: 1.1em;
}

.hv-chrome i {
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	background: var(--line-strong);
}

.hv-chrome b {
	margin-left: 0.6em;
	color: var(--muted);
	font-weight: 650;
}

.hv-kpis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8em;
}

.hv-kpis > div {
	padding: 0.8em 0.9em;
	border-radius: 0.8em;
	background: var(--soft);
}

.hv-kpis small {
	display: block;
	color: var(--muted);
	font-size: 0.85em;
}

.hv-kpis strong {
	display: block;
	margin-top: 0.15em;
	color: var(--ink);
	font-size: 1.55em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.hv-kpis em {
	color: var(--accent-ink);
	font-size: 0.85em;
	font-style: normal;
	font-weight: 700;
}

.hv-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.6em;
	height: 8.5em;
	margin-top: 1.2em;
}

.hv-bars span {
	flex: 1;
	height: var(--h);
	border-radius: 0.45em 0.45em 0.2em 0.2em;
	background: var(--primary-200);
	transform-origin: bottom;
	animation: sc-bar 0.9s var(--ease) both;
	animation-delay: calc(0.7s + var(--i) * 70ms);
}

.hv-bars span:nth-child(6) {
	background: var(--primary);
}

.hv-card--dash {
	top: 17%;
	left: 6%;
	width: 62%;
}

.hv-card--code,
.hv-card--editor {
	border-color: var(--night-line);
	background: var(--night);
	color: #c9d1e6;
	font-family: var(--mono);
}

.hv-card--code {
	top: 5%;
	right: 0;
	width: 46%;
}

.hv-card code,
.hv-editor code {
	display: block;
	overflow: hidden;
	font-family: var(--mono);
	font-size: 0.95em;
	line-height: 1.75;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.t-k { color: #8fa8ff; }
.t-f { color: #19d3a2; }
.t-s { color: #f5b84b; }
.t-c { color: #6b7385; }

.hv-card--shield {
	display: flex;
	align-items: center;
	gap: 0.9em;
	right: 3%;
	bottom: 13%;
	padding: 0.9em 1.3em 0.9em 0.9em;
}

.hv-card--shield .icon {
	width: 2.8em;
	height: 2.8em;
	padding: 0.6em;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-ink);
}

.hv-card--shield strong {
	display: block;
	color: var(--ink);
	font-size: 1.1em;
}

.hv-card--shield small {
	color: var(--muted);
	font-size: 0.9em;
}

.hv-card--phone {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	left: 0;
	bottom: 3%;
	width: 25%;
	aspect-ratio: 9 / 17;
	padding: 1.3em 0.8em 0.8em;
	border-radius: 1.8em;
}

.hv-notch {
	width: 38%;
	height: 0.4em;
	margin: 0 auto 0.5em;
	border-radius: 1em;
	background: var(--line-strong);
}

.hv-line {
	height: 0.55em;
	border-radius: 1em;
	background: var(--ink);
	opacity: 0.85;
}

.hv-line.w80 { width: 80%; }
.hv-line.w60 { width: 60%; }
.hv-line.w40 { width: 40%; }
.hv-line.light { background: #fff; }
.hv-line.dim { opacity: 0.4; }

.hv-tile {
	height: 3.4em;
	border-radius: 0.8em;
	background: var(--primary-soft);
}

.hv-tile--alt {
	background: var(--accent-soft);
}

.hv-btn {
	height: 1.8em;
	margin-top: auto;
	border-radius: 1em;
	background: var(--primary);
}

.hv-list {
	display: grid;
	gap: 0.45em;
}

.hv-list i {
	height: 2.2em;
	border-radius: 0.6em;
	background: var(--soft);
}

/* Services : grille de domaines. */
.hv-tiles {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4%;
	width: 68%;
	transform: translate(-50%, -50%);
}

.hv-tilebox {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px solid var(--line);
	border-radius: 20%;
	background: var(--surface);
	box-shadow: var(--shadow);
	color: var(--link);
	animation: sc-rise 0.7s var(--ease) both;
	animation-delay: calc(0.1s + var(--i) * 70ms);
}

.hv-tilebox .icon {
	width: 36%;
	height: 36%;
}

.hv-tilebox.is-accent {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

/* Solutions : ERP. */
.hv-card--erp {
	top: 15%;
	left: 4%;
	width: 84%;
}

.hv-erp {
	display: grid;
	grid-template-columns: 20% 1fr;
	gap: 1em;
}

.hv-erp__side {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	padding: 1em 0.8em;
	border-radius: 0.8em;
	background: var(--night);
}

.hv-erp__side span {
	height: 0.5em;
	border-radius: 1em;
	background: rgba(255, 255, 255, 0.3);
}

.hv-erp__side span:nth-child(2) {
	background: var(--accent);
}

.hv-rows {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.hv-rows li {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.75em 0.2em;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-weight: 650;
	animation: sc-rise 0.6s var(--ease) both;
	animation-delay: calc(0.6s + var(--i) * 90ms);
}

.hv-rows em {
	margin-left: auto;
	padding: 0.2em 0.7em;
	border-radius: 1em;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: 0.85em;
	font-style: normal;
}

.hv-dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--primary);
}

.hv-card--flow {
	right: 0;
	bottom: 8%;
}

/* Cybersécurité : bouclier. */
.hv--shield .hv-radar {
	color: var(--accent);
	opacity: 0.7;
}

.hv-shield-path,
.hv-shield-check {
	stroke: var(--accent);
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
	animation: sc-draw 1.8s 0.3s var(--ease) forwards;
}

.hv-shield-check {
	animation-delay: 1.4s;
}

.hv-card--audit {
	right: 0;
	bottom: 4%;
	width: 60%;
	border-color: var(--night-line);
	background: rgba(14, 21, 48, 0.92);
	color: #c9d1e6;
}

.hv-card--audit .hv-chrome i {
	background: var(--night-line);
}

.hv-checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv-checks li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.65em 0;
	border-bottom: 1px solid var(--night-line);
	font-family: var(--mono);
	font-size: 0.95em;
	animation: sc-rise 0.6s var(--ease) both;
	animation-delay: calc(0.8s + var(--i) * 120ms);
}

.hv-checks em {
	padding: 0.15em 0.65em;
	border-radius: 1em;
	font-size: 0.85em;
	font-style: normal;
	font-weight: 700;
}

.hv-checks .is-ok em {
	background: rgba(25, 211, 162, 0.14);
	color: #19d3a2;
}

.hv-checks .is-warn em {
	background: rgba(245, 184, 75, 0.15);
	color: #f5b84b;
}

.hv-score {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 1em;
	font-size: 0.95em;
}

.hv-score strong {
	color: #19d3a2;
	font-size: 1.2em;
}

/* Développement : éditeur. */
.hv-card--editor {
	top: 12%;
	left: 0;
	width: 86%;
}

.hv-card--editor .hv-chrome i {
	background: var(--night-line);
}

.hv-editor code {
	animation: sc-rise 0.5s var(--ease) both;
	animation-delay: calc(0.4s + var(--i) * 90ms);
}

.hv-editor code i {
	display: inline-block;
	width: 1.8em;
	color: #4a5370;
	font-style: normal;
}

.hv-card--phone-dev {
	left: auto;
	right: 2%;
	bottom: 2%;
	width: 27%;
}

.hv-card--perf {
	right: auto;
	left: 6%;
	bottom: 10%;
}

/* Communication : planche de marque. */
.hv-card--board {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.8em;
	top: 12%;
	left: 4%;
	width: 48%;
	aspect-ratio: 4 / 5;
	padding: 2em;
	border-color: var(--night-line);
	background: var(--night);
}

.hv-mark {
	position: relative;
	width: 46%;
	aspect-ratio: 1;
	margin-bottom: auto;
	margin-top: 18%;
}

.hv-mark i {
	position: absolute;
	left: 0;
	top: 8%;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary);
}

.hv-mark b {
	position: absolute;
	right: 0;
	top: 0;
	width: 55%;
	aspect-ratio: 1;
	border-radius: 24%;
	background: var(--accent);
	opacity: 0.92;
}

.hv-card--board .hv-line {
	align-self: stretch;
	margin-inline: 12%;
}

.hv-card--swatches {
	display: flex;
	gap: 0.6em;
	top: 8%;
	right: 4%;
	padding: 0.9em;
	border-radius: 2em;
}

.hv-card--swatches i {
	width: 2.4em;
	height: 2.4em;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--c);
}

.hv-card--type {
	top: 30%;
	right: 6%;
	width: 36%;
}

.hv-card--type strong {
	display: block;
	color: var(--ink);
	font-size: 3.6em;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.hv-card--type small {
	color: var(--muted);
}

.hv-card--social {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6em;
	right: 0;
	bottom: 6%;
	width: 44%;
	padding: 0.8em;
}

.hv-card--social span {
	aspect-ratio: 1;
	border-radius: 0.7em;
	background: var(--soft);
}

.hv-card--social span:nth-child(1) { background: var(--primary); }
.hv-card--social span:nth-child(2) { background: var(--accent-soft); }
.hv-card--social span:nth-child(4) { background: var(--night); }

/* Illustrations de projets. */
.project-visual {
	display: block;
	width: 100%;
	height: 100%;
	font-family: var(--font);
}

/* 7. Sections ---------------------------------------------------------------- */

.section {
	position: relative;
	padding-block: var(--section);
}

.section--soft {
	background: var(--soft);
}

.section--dark {
	background: var(--bg);
	color: var(--text);
}

.section--content {
	padding-block: clamp(40px, 6vw, 80px) var(--section);
}

.section-header {
	max-width: 780px;
	margin: 0 auto clamp(44px, 6vw, 72px);
	text-align: center;
}

.section-header--left {
	margin-left: 0;
	text-align: left;
}

.section-title {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: -0.032em;
}

.section-lead {
	margin: 20px 0 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.section-header--left .section-lead {
	max-width: 640px;
}

.section-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.section-header-row .section-header {
	margin-bottom: 0;
}

/* En-têtes de pages intérieures. */
.page-hero {
	position: relative;
	padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 104px);
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}

.page-hero__inner {
	max-width: calc(940px + var(--gutter) * 2);
	margin-left: 0;
}

.page-hero--visual .page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
}

.page-hero:not(.page-hero--visual) .page-hero__inner {
	margin-inline: auto;
	max-width: calc(var(--container) + var(--gutter) * 2);
}

.page-hero:not(.page-hero--visual) .page-hero__content {
	max-width: 900px;
}

.page-hero__title {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 1.05;
	letter-spacing: -0.038em;
}

.page-hero__lead {
	max-width: 640px;
	margin: 22px 0 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.page-hero--dark {
	background-color: var(--bg);
	background-image:
		radial-gradient(600px 360px at 85% 10%, rgba(25, 211, 162, 0.1), transparent 70%),
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 13.5px;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 6px;
	opacity: 0.5;
}

.breadcrumbs a {
	color: var(--muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--link);
}

.breadcrumbs [aria-current] {
	color: var(--ink);
	font-weight: 600;
}

.page-header {
	padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--line);
}

.page-header__title {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.page-header__lead {
	max-width: 680px;
	margin: 18px 0 0;
	font-size: var(--fs-lead);
}

/* 8. Composants de sections -------------------------------------------------- */

/* Pôles d'expertise. */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.pillar::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 32px;
	right: 32px;
	height: 2px;
	border-radius: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transition: transform 0.5s var(--ease);
}

.pillar:hover {
	border-color: var(--primary-200);
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.pillar:hover::before {
	transform: scaleX(1);
}

.pillar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.pillar__icon,
.card__icon,
.detail__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--primary-soft);
	color: var(--link);
}

.pillar__icon .icon {
	width: 26px;
	height: 26px;
}

.pillar__number {
	color: var(--muted);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.pillar__title {
	margin: 0 0 10px;
	font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
	letter-spacing: -0.025em;
}

.pillar__text {
	margin: 0 0 24px;
}

.pillar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.pillar__list li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--soft);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.pillar__cta {
	margin-top: auto;
}

/* Cartes. */
.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Grille de 3 : les dernières cartes d'une ligne incomplète s'élargissent (grands écrans). */
@media (min-width: 1081px) {
	.cards--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cards--3 > * { grid-column: span 2; }
	.cards--3 > :last-child:nth-child(3n + 1) { grid-column: span 6; }
	.cards--3 > :nth-last-child(2):nth-child(3n + 1),
	.cards--3 > :last-child:nth-child(3n + 2) { grid-column: span 3; }
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
	scroll-margin-top: calc(var(--header-h) + 24px);
}

.card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
}

.card__title {
	margin: 22px 0 8px;
	font-size: 19px;
	letter-spacing: -0.015em;
}

.card__text {
	margin: 0;
	font-size: 15.5px;
}

.card__more {
	margin-top: auto;
	padding-top: 22px;
	font-size: 15px;
}

.card--link:hover {
	border-color: var(--primary-200);
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.card--link:hover .card__more {
	gap: 0.7em;
}

.cards--minimal {
	gap: 48px 40px;
}

.cards--minimal .card {
	padding: 0;
	border: 0;
	background: none;
}

.cards--minimal .card__title {
	margin-top: 20px;
}

/* Odoo. */
.odoo__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
}

.odoo__content .section-header {
	margin-bottom: 36px;
}

.odoo__panel {
	position: relative;
	padding: clamp(18px, 2.4vw, 28px);
	overflow: hidden;
	border: 1px solid var(--night-line);
	border-radius: 26px;
	background-color: var(--night);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 32px 32px;
	box-shadow: var(--shadow-lg);
	color: #c9d1e6;
}

.odoo__panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	color: #8f98ab;
	font-size: 13px;
	font-weight: 600;
}

.odoo__panel-dots {
	display: flex;
	gap: 6px;
}

.odoo__panel-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--night-line);
}

.odoo__modules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.odoo__modules li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--night-line);
	border-radius: 14px;
	background: var(--night-2);
	color: #e6eaf3;
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.3;
	transition: border-color 0.3s, transform 0.3s var(--ease);
}

.odoo__modules li:hover {
	border-color: rgba(91, 124, 255, 0.6);
	transform: translateY(-2px);
}

.odoo__modules .icon {
	width: 22px;
	height: 22px;
	color: #8fa8ff;
}

.odoo__modules li:nth-child(3n + 2) .icon {
	color: #19d3a2;
}

.odoo__panel-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: #8f98ab;
	font-size: 12.5px;
}

.status-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(25, 211, 162, 0.16);
}

/* Méthodologie. */
.steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--count), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps::before,
.steps::after {
	content: "";
	position: absolute;
	top: 27px;
	left: 28px;
	right: calc((100% - (var(--count) - 1) * 24px) / var(--count) - 28px);
	height: 2px;
	background: var(--line);
}

.steps::after {
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.8s var(--ease) 0.2s;
}

.steps.is-visible::after {
	transform: scaleX(1);
}

.step {
	position: relative;
}

.step__number {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	background: var(--bg);
	color: var(--ink);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.4s, border-color 0.4s, color 0.4s;
	transition-delay: calc(0.3s + var(--i) * 0.32s);
}

.section--soft .step__number {
	background: var(--soft);
}

.steps.is-visible .step__number {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.step__title {
	margin: 0 0 8px;
	font-size: 20px;
	letter-spacing: -0.015em;
}

.step__text {
	margin: 0;
	font-size: 15.5px;
}

/* Portfolio. */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.filter {
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.filter:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.filter.is-active {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.project-card.is-hidden {
	display: none;
}

.project-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

a.project-card__link:hover {
	border-color: var(--primary-200);
	box-shadow: var(--shadow-lg);
	transform: translateY(-5px);
}

.project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--soft);
}

.project-card__media img,
.project-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.project-card:hover .project-card__media img,
.project-card:hover .project-card__media svg {
	transform: scale(1.045);
}

.project-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--night);
	font-size: 12px;
	font-weight: 700;
}

.project-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 26px;
}

.project-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--muted);
	font-size: 13.5px;
}

.project-card__title {
	margin: 4px 0 0;
	font-size: 20px;
	letter-spacing: -0.015em;
}

.project-card__text {
	margin: 0;
	font-size: 15px;
}

.project-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	color: var(--link);
	font-size: 14.5px;
	font-weight: 700;
}

.project-card__more .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--ease);
}

.project-card:hover .project-card__more .icon {
	transform: translate(2px, -2px);
}

/* Secteurs. */
.industries__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--line);
	list-style: none;
}

.industry {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 132px;
	padding: 24px 12px;
	background: var(--surface);
	color: var(--ink);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.3;
	text-align: center;
	transition: background-color 0.3s;
}

.industry .icon {
	width: 28px;
	height: 28px;
	color: var(--link);
	transition: transform 0.3s var(--ease);
}

.industry:hover {
	background: var(--primary-soft);
}

.industry:hover .icon {
	transform: translateY(-2px);
}

/* Technologies. */
.technologies__inner,
.faq__inner,
.split__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(40px, 6vw, 96px);
}

.section-header--sticky {
	position: sticky;
	top: calc(var(--admin-bar) + var(--header-h) + 24px);
}

.tech-groups {
	margin: 0;
	border-bottom: 1px solid var(--line);
}

.tech-group {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
}

.tech-group__label {
	padding-top: 6px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 750;
}

.tech-group__items {
	margin: 0;
}

/* Partenaires. */
.partners {
	padding-block: clamp(56px, 7vw, 96px);
}

.partners .section-header {
	margin-bottom: 40px;
}

.partners__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner img {
	display: block;
	width: auto;
	max-width: 170px;
	max-height: 46px;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s, opacity 0.3s;
}

.partner a:hover img,
.partner img:hover {
	filter: none;
	opacity: 1;
}

/* FAQ. */
.faq__intro {
	position: sticky;
	top: calc(var(--admin-bar) + var(--header-h) + 24px);
}

.faq__intro .section-header {
	margin-bottom: 28px;
}

.faq__help {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	border-radius: var(--radius);
	background: var(--soft);
}

.section--soft .faq__help {
	background: var(--surface);
}

.faq__help p {
	margin: 0;
	color: var(--ink);
	font-weight: 650;
}

.accordion {
	border-top: 1px solid var(--line);
}

.accordion__item {
	border-bottom: 1px solid var(--line);
}

.accordion__heading {
	margin: 0;
	font-size: inherit;
	letter-spacing: normal;
}

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.accordion__trigger:hover {
	color: var(--link);
}

.accordion__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--ink);
	transition: transform 0.35s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s;
}

.accordion__icon .icon {
	width: 18px;
	height: 18px;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
	transform: rotate(45deg);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.4s var(--ease), visibility 0.4s;
}

.accordion__item.is-open > .accordion__panel,
html:not(.js) .accordion__panel {
	grid-template-rows: 1fr;
	visibility: visible;
}

.accordion__content {
	overflow: hidden;
}

.accordion__content p {
	max-width: 64ch;
	margin: 0 0 26px;
}

/* Appel à l'action. */
.cta {
	padding-block: clamp(40px, 6vw, 88px);
}

.cta-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 88px);
	border-radius: var(--radius-xl);
	background-color: var(--night);
	background-image: radial-gradient(700px 360px at 85% 0%, rgba(41, 82, 255, 0.38), transparent 70%);
	color: #fff;
	text-align: center;
}

.cta-panel__arcs {
	inset: auto;
	top: -45%;
	right: -22%;
	z-index: -1;
	width: 820px;
	height: 820px;
	color: #5b7cff;
	opacity: 0.45;
}

.cta-panel__arcs .hv-links path {
	stroke: #5b7cff;
}

.cta-panel__arcs .hv-nodes circle {
	fill: var(--night);
	stroke: #5b7cff;
}

.cta-panel__arcs .hv-nodes .hv-core {
	fill: #5b7cff;
}

.cta-panel__content {
	max-width: 780px;
	margin-inline: auto;
}

.cta-panel__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.032em;
}

.cta-panel__text {
	max-width: 600px;
	margin: 20px auto 0;
	color: #b7bfd0;
	font-size: var(--fs-lead);
}

.cta-panel__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 38px;
}

.cta-panel--accent {
	background-color: var(--primary);
	background-image: radial-gradient(700px 360px at 85% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
}

.cta-panel--accent .cta-panel__text {
	color: rgba(255, 255, 255, 0.88);
}

.cta-panel--accent .cta-panel__arcs {
	color: #fff;
	opacity: 0.22;
}

.cta-panel--accent .btn--light {
	color: var(--primary-hover);
}

/* Liste détaillée (Services, Solutions). */
.details__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

.details__index {
	position: sticky;
	top: calc(var(--admin-bar) + var(--header-h) + 24px);
}

.details__index ol {
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--line);
	list-style: none;
}

.details__index a {
	display: flex;
	gap: 12px;
	margin-left: -1px;
	padding: 9px 16px;
	border-left: 2px solid transparent;
	color: var(--muted);
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.details__index a span {
	padding-top: 1px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.details__index a:hover,
.details__index a.is-active {
	border-left-color: var(--primary);
	color: var(--ink);
}

.details__list {
	display: grid;
	gap: 20px;
}

.detail {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 28px;
	padding: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	scroll-margin-top: calc(var(--header-h) + 24px);
	transition: border-color 0.3s;
}

.detail:hover {
	border-color: var(--primary-200);
}

.detail__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.detail__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
}

.detail__icon .icon {
	width: 28px;
	height: 28px;
}

.detail__number {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.detail__title {
	margin: 8px 0 10px;
	font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
	letter-spacing: -0.025em;
}

.detail__text {
	margin: 0 0 24px;
}

.detail .check-list {
	margin-bottom: 26px;
}

/* Bloc texte + éléments. */
.split__items {
	border-top: 1px solid var(--line);
}

.split__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.split__num {
	padding-top: 3px;
	color: var(--link);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.split__title {
	margin: 0 0 8px;
	font-size: 21px;
	letter-spacing: -0.02em;
}

.split__text {
	margin: 0;
}

/* Chiffres clés. */
.stats {
	padding-block: clamp(48px, 6vw, 80px);
}

.stats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 24px;
	border-top: 2px solid var(--ink);
}

.stat__value {
	color: var(--ink);
	font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.stat__label {
	font-size: 15.5px;
}

/* 9. Contact & formulaire ------------------------------------------------------ */

.contact {
	padding-top: clamp(40px, 6vw, 88px);
}

.contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(40px, 6vw, 88px);
}

.contact h1.section-title {
	font-size: var(--fs-h1);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.contact__info .section-header {
	margin-bottom: 32px;
}

.contact__details {
	display: grid;
	gap: 22px;
}

.contact-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: var(--text);
	line-height: 1.5;
}

.contact-list .icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--link);
}

.contact-list small {
	display: block;
	margin-bottom: 2px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-list a {
	color: var(--ink);
	font-weight: 650;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact-list a:hover {
	color: var(--link);
}

.contact-list--large {
	gap: 0;
	border-top: 1px solid var(--line);
}

.contact-list--large li {
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.contact-list--large .icon {
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 12px;
	border-radius: 50%;
	background: var(--primary-soft);
}

.contact-list-empty a,
.contact-list--footer-empty a {
	font-weight: 700;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--ink);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.social-links .icon {
	width: 18px;
	height: 18px;
}

.social-links a:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.map {
	aspect-ratio: 16 / 10;
	margin-top: 28px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 18px;
	background-color: var(--soft);
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 28px 28px;
}

.map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	text-align: center;
}

.map__placeholder > .icon {
	width: 34px;
	height: 34px;
	color: var(--link);
}

.map__link {
	color: var(--muted);
	font-size: 13.5px;
}

.map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact__form-wrap {
	padding: clamp(24px, 4vw, 44px);
	border: 1px solid var(--line);
	border-radius: 26px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.form__title {
	margin: 0 0 6px;
	font-size: 26px;
	letter-spacing: -0.025em;
}

.form__intro {
	margin: 0 0 26px;
	color: var(--muted);
	font-size: 14px;
}

.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
	margin-bottom: 26px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.field--full {
	grid-column: 1 / -1;
}

.field label {
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
}

.field input,
.field select,
.field textarea,
.search-form__input {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	border: 1.5px solid var(--line-strong);
	border-radius: 12px;
	background: var(--bg);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.field select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646d80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

.field textarea {
	min-height: 150px;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--muted);
	opacity: 0.8;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-form__input:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 4px rgba(41, 82, 255, 0.16);
}

.field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

.field--check input {
	flex: none;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	-webkit-appearance: auto;
	appearance: auto;
	accent-color: var(--primary);
}

.field--check label {
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
	border-color: #d93d3d;
}

.field__error {
	color: #c42f2f;
	font-size: 13.5px;
	font-weight: 600;
}

.field--check .field__error {
	flex-basis: 100%;
}

.field--check.is-invalid {
	flex-wrap: wrap;
}

.form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form .btn[disabled] {
	cursor: progress;
	opacity: 0.75;
}

.notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
	padding: 16px 18px;
	border-radius: 14px;
	font-size: 15px;
}

.notice p {
	margin: 0;
}

.notice .icon {
	width: 22px;
	height: 22px;
}

.notice--success {
	border: 1px solid #b7eedd;
	background: #e7faf4;
	color: #0b5e48;
}

.notice--error {
	border: 1px solid #f7c5c5;
	background: #fdecec;
	color: #9b1c1c;
}

/* 10. Pied de page -------------------------------------------------------------- */

.site-footer {
	padding: clamp(56px, 7vw, 88px) 0 28px;
	border-top: 1px solid var(--line);
	background: var(--soft);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
	gap: 40px;
}

.site-footer__brand p {
	max-width: 320px;
	margin: 20px 0 24px;
	font-size: 15px;
}

.site-footer__title {
	margin: 0 0 18px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.footer-menu {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	color: var(--text);
	font-size: 15px;
	text-decoration: none;
}

.footer-menu a:hover {
	color: var(--link);
}

.contact-list--footer li {
	font-size: 15px;
}

.contact-list--footer .icon {
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

.site-footer__bottom p {
	margin: 0;
}

.legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-menu a {
	color: var(--muted);
	text-decoration: none;
}

.legal-menu a:hover {
	color: var(--ink);
}

.whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1faa59;
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(10, 16, 34, 0.45);
	transition: transform 0.25s var(--ease);
}

.whatsapp-float:hover {
	transform: scale(1.06);
}

.whatsapp-float .icon {
	width: 28px;
	height: 28px;
}

/* 11. Blog & pages ------------------------------------------------------------------- */

.posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.post-card__link:hover {
	border-color: var(--primary-200);
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.post-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--soft);
}

.post-card__media img,
.post-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 24px 24px;
}

.post-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.post-card__excerpt {
	margin: 0;
	font-size: 15px;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 13.5px;
}

.post-card .post-meta {
	margin-top: auto;
}

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 650;
	text-decoration: none;
}

.pagination .current {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.empty-state {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.search-form {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

.search-form__submit {
	flex: none;
	padding-inline: 1.1em;
}

.search-again {
	margin-bottom: 40px;
}

.prose {
	max-width: 760px;
	margin-inline: auto;
	color: var(--text);
	font-size: clamp(1.0313rem, 1rem + 0.15vw, 1.125rem);
	line-height: 1.75;
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose h2 {
	margin-top: 2em;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.prose h3 {
	margin-top: 1.7em;
	font-size: 1.3em;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose blockquote {
	margin-inline: 0;
	padding-left: 22px;
	border-left: 3px solid var(--primary);
	color: var(--ink);
	font-size: 1.15em;
}

.prose img,
.prose__cover img {
	border-radius: 16px;
}

.prose__cover {
	margin: 0 auto 40px;
	max-width: 1000px;
}

.prose code {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: var(--soft);
	font-family: var(--mono);
	font-size: 0.9em;
}

.prose pre {
	padding: 20px;
	overflow-x: auto;
	border-radius: 14px;
	background: var(--night);
	color: #e6eaf3;
}

.prose pre code {
	padding: 0;
	background: none;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.prose th,
.prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.post-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text);
	font-size: 13.5px;
	text-decoration: none;
}

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 48px 0;
}

.post-nav > div {
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
}

.post-nav span {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.post-nav a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.post-nav__next {
	grid-column: 2;
	text-align: right;
}

.comments {
	margin-top: 48px;
}

.comments__list {
	padding-left: 1.2em;
}

.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--line-strong);
	border-radius: 12px;
	background: var(--bg);
	color: var(--ink);
}

.project-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	margin: 36px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.project-facts dt {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.project-facts dd {
	margin: 4px 0 0;
	color: var(--ink);
	font-weight: 650;
}

.project-single__cover {
	aspect-ratio: 16 / 9;
	margin: 40px 0 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--soft);
}

.project-single__cover img,
.project-single__cover svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.error-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	text-align: center;
}

.error-404__code {
	margin: 0 0 8px;
	color: var(--primary-200);
	font-size: clamp(6rem, 18vw, 11rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
}

.error-404 .page-header__title {
	margin-inline: auto;
}

.error-404 .hero__actions {
	justify-content: center;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 36px 0;
	padding: 0;
	list-style: none;
}

.error-404__links a {
	font-weight: 650;
}

.elementor-content,
.full-width-content {
	width: 100%;
}

.alignwide {
	max-width: 1100px;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* 12. Variante sombre (page Cybersécurité) ------------------------------------------- */

.theme-cyber {
	background: var(--bg);
}

.theme-cyber .site-header {
	background: rgba(7, 11, 24, 0.78);
}

.theme-cyber .site-header.is-scrolled {
	background: rgba(7, 11, 24, 0.94);
	box-shadow: 0 8px 28px -22px rgba(0, 0, 0, 0.9);
}

.theme-cyber .eyebrow:not(.eyebrow--pill) {
	color: var(--accent);
	font-family: var(--mono);
	letter-spacing: 0.08em;
}

.theme-cyber .section + .section {
	border-top: 1px solid var(--line);
}

.theme-cyber .card__icon,
.theme-cyber .detail__icon {
	background: var(--accent-soft);
	color: var(--accent);
}

.theme-cyber .card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--surface);
}

.theme-cyber .card:hover {
	border-color: rgba(25, 211, 162, 0.4);
}

.theme-cyber .step__number,
.theme-cyber .split__num {
	font-family: var(--mono);
}

.theme-cyber .steps::after {
	background: var(--accent);
}

.theme-cyber .steps.is-visible .step__number {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--night);
}

.theme-cyber .split__num {
	color: var(--accent);
}

.theme-cyber .cta-panel {
	border: 1px solid var(--line);
}

.theme-cyber .site-footer {
	background: #050813;
}

.theme-cyber .hero__pillars,
.theme-cyber .page-hero {
	border-color: var(--line);
}

.theme-cyber .btn--ghost:hover,
.section--dark .btn--ghost:hover {
	background: rgba(255, 255, 255, 0.04);
}

/* 13. Animations ------------------------------------------------------------------- */

@keyframes sc-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes sc-bar {
	from {
		transform: scaleY(0);
	}
}

.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: calc(var(--delay, 0) * 90ms);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.elementor-editor-active .reveal,
.elementor-editor-preview .reveal {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}
}

/* 14. Responsive -------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.site-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.industries__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1080px) {
	:root {
		--header-h: 72px;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--header-h) - var(--admin-bar));
		height: calc(100dvh - var(--header-h) - var(--admin-bar));
		margin: 0;
		padding: 8px var(--gutter) 32px;
		overflow-y: auto;
		border-top: 1px solid var(--line);
		background: var(--bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
	}

	.nav-open .site-header {
		height: var(--header-h);
		background: var(--bg);
	}

	.nav-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	body.nav-open {
		overflow: hidden;
	}

	.menu--primary {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu--primary > li > a {
		padding: 16px 2px;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		color: var(--ink);
		font-size: 20px;
	}

	.menu--primary > li > a:hover {
		background: none;
		color: var(--link);
	}

	.menu--primary > .current-menu-item > a::before,
	.menu--primary > .current-menu-ancestor > a::before,
	.menu--primary > .current_page_item > a::before {
		left: auto;
		right: 4px;
		bottom: 50%;
		width: 6px;
		height: 6px;
		margin: 0 0 -3px;
	}

	.menu--primary .menu-item-has-children > a::after {
		display: none;
	}

	.menu--primary .sub-menu,
	.menu--primary li:hover > .sub-menu,
	.menu--primary li:focus-within > .sub-menu {
		position: static;
		min-width: 0;
		padding: 6px 0 12px 14px;
		border: 0;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.menu--primary .sub-menu a {
		padding: 10px 2px;
		color: var(--text);
		font-size: 16px;
	}

	.site-nav__footer {
		display: grid;
		gap: 24px;
		margin-top: auto;
		padding-top: 32px;
	}

	.hero__inner,
	.page-hero--visual .page-hero__inner,
	.odoo__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__visual,
	.page-hero__visual {
		max-width: 520px;
	}

	.pillars {
		grid-template-columns: minmax(0, 1fr);
	}

	.pillar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: 40px;
	}

	.pillar__head,
	.pillar__title,
	.pillar__text,
	.pillar__cta {
		grid-column: 1;
	}

	.pillar__list {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-content: start;
		margin: 0;
	}

	.cards,
	.cards--3,
	.cards--4,
	.projects,
	.posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.technologies__inner,
	.faq__inner,
	.split__inner,
	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.section-header--sticky,
	.faq__intro {
		position: static;
	}

	.details__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.details__index {
		display: none;
	}

	.stats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (max-width: 900px) {
	.steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.steps::before,
	.steps::after {
		top: 28px;
		bottom: 28px;
		left: 27px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.steps::after {
		transform: scaleY(0);
		transform-origin: center top;
	}

	.steps.is-visible::after {
		transform: scaleY(1);
	}

	.step {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 20px;
		padding-bottom: 32px;
	}

	.step:last-child {
		padding-bottom: 0;
	}

	.step__number {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.step__title {
		margin-top: 14px;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.industries__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pillar {
		display: flex;
	}

	.pillar__list {
		margin: 0 0 28px;
	}

	.tech-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.tech-group__label {
		padding-top: 0;
	}

	.detail {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.detail__head {
		flex-direction: row;
		justify-content: space-between;
	}

	.section-header {
		text-align: left;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	.header-cta {
		display: none;
	}

	.site-logo img {
		height: 30px;
	}

	.hero__actions .btn,
	.page-hero__actions .btn,
	.cta-panel__actions .btn {
		flex: 1 1 100%;
	}

	.cards,
	.cards--2,
	.cards--3,
	.cards--4,
	.projects,
	.posts,
	.check-list--2,
	.form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.odoo__modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-nav__next {
		grid-column: 1;
		text-align: left;
	}

	.cta-panel {
		border-radius: 24px;
		text-align: left;
	}

	.cta-panel__actions {
		justify-content: flex-start;
	}

	.cta-panel__text {
		margin-left: 0;
	}

	.stat__value {
		font-size: 2.75rem;
	}
}

@media (max-width: 480px) {
	.industries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.industry {
		min-height: 112px;
		font-size: 14px;
	}

	.stats__list {
		gap: 28px 16px;
	}
}

@media print {
	.site-header,
	.site-footer,
	.whatsapp-float,
	.cta,
	.nav-toggle {
		display: none !important;
	}

	.site-header + .site-main {
		padding-top: 0;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}
}