/* =========================================================
   Deolys — feuille de style principale
   ========================================================= */

:root {
	--deolys-navy: #0F2B5B;
	--deolys-navy-2: #1C4C9C;
	--deolys-primary: #0069FF;
	--deolys-primary-dark: #0052C7;
	--deolys-primary-light: #E5F0FF;
	--deolys-teal: #0FA6A0;
	--deolys-blue: #1B6FD9;
	--deolys-violet: #9333EA;
	--deolys-red: #DB2427;
	--deolys-orange: #F0A048;
	--deolys-green: #12A83A;
	--deolys-logo-gradient: linear-gradient(90deg, var(--deolys-orange) 0%, var(--deolys-green) 33%, var(--deolys-teal) 66%, var(--deolys-primary) 100%);
	--deolys-pastel-teal: #E5F6F5;
	--deolys-pastel-orange: #FDF3E7;
	--deolys-pastel-green: #E9F8EE;
	--deolys-pastel-cyan: #E4F5FB;
	--deolys-pastel-violet: #EFECFD;
	--deolys-menu-link: #16233F;
	--deolys-menu-link-active: #0069FF;
	--deolys-text: #1C2733;
	--deolys-muted: #64748B;
	--deolys-bg: #F6F8FC;
	--deolys-border: #E6EAF1;
	--deolys-radius: 16px;
	--deolys-radius-sm: 10px;
	--deolys-shadow-sm: 0 2px 10px rgba(16, 30, 54, .06);
	--deolys-shadow: 0 12px 30px rgba(16, 30, 54, .10);
	--bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--bs-primary: var(--deolys-primary);
	--bs-primary-rgb: 0, 105, 255;
	--bs-link-color: var(--deolys-primary);
	--bs-link-hover-color: var(--deolys-primary-dark);
	--bs-body-color: var(--deolys-text);
	--bs-body-bg: #ffffff;

	/* --- SaaSpal-style azure redesign tokens (#0069FF family) --- */
	--deolys-indigo-rgb: 0, 105, 255;
	--deolys-violet-rgb: 61, 139, 255;
	--deolys-indigo-deep: #0A1E40;
	--deolys-blob-1: #1F79FF;
	--deolys-blob-2: #3D8BFF;
	--deolys-blob-3: #BBD6FF;
	--deolys-float-shadow: 0 50px 100px -20px rgba(10, 30, 64, .35), 0 20px 40px -10px rgba(10, 30, 64, .25);
	--deolys-band-gradient: linear-gradient(135deg, #0069FF 0%, #1F79FF 45%, #3D8BFF 100%);
	--deolys-brand-line: linear-gradient(90deg, #0069FF 0%, #3D8BFF 100%);
}

/* =========================================================
   Base & typography
   ========================================================= */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--deolys-text);
	background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	color: var(--deolys-navy);
	letter-spacing: -0.01em;
}

.entry-content h1,
.front-entry h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: 1rem; }
.entry-content h2,
.front-entry h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: 2rem; margin-bottom: .75rem; }
.entry-content h3,
.front-entry h3 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: .5rem; }

a { transition: color .15s ease; }

.skip-link {
	position: absolute;
	top: -50px;
	left: 0;
	background: var(--deolys-navy);
	color: #fff;
	padding: .75rem 1.25rem;
	z-index: 2000;
}
.skip-link:focus {
	top: 0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	font-weight: 600;
	border-radius: 50px;
	padding-block: .7rem;
	padding-inline: 1.75rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

/* Bliss-style ripple: a soft circle expands from the center on hover. */
.btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	padding: 50%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	transform: translate3d(-50%, -50%, 0) scale(0);
	transition: transform .35s ease-out;
	z-index: -1;
}
.btn:hover::after {
	transform: translate3d(-50%, -50%, 0) scale(1.6);
}
.btn-outline-primary::after,
.btn-outline-light::after {
	background: rgba(var(--deolys-indigo-rgb), .1);
}

.btn-primary {
	background-color: var(--deolys-primary);
	border-color: var(--deolys-primary);
	box-shadow: 0 6px 16px rgba(var(--deolys-indigo-rgb), .28);
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--deolys-primary-dark);
	border-color: var(--deolys-primary-dark);
}

.btn-outline-primary {
	color: var(--deolys-primary);
	border-color: var(--deolys-primary);
}
.btn-outline-primary:hover {
	background-color: var(--deolys-primary);
	border-color: var(--deolys-primary);
}

/* =========================================================
   Top utility bar
   ========================================================= */
.topbar {
	background-color: var(--deolys-navy);
	color: rgba(255, 255, 255, .85);
}
.topbar-link {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}
.topbar-link:hover {
	color: #fff;
}
.topbar-widget a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}
.topbar-widget a:hover {
	color: #fff;
}
.topbar-item {
	color: rgba(255, 255, 255, .85);
}
.topbar .topbar-search-menu {
	min-width: 280px;
	border: none;
	border-radius: var(--deolys-radius-sm);
	box-shadow: var(--deolys-shadow);
	/* La topbar est un bloc frère de .site-header, qui est collant et crée un
	   contexte d'empilement à 1030 : sans cette valeur, le menu déroulant
	   (1000 par défaut) passait derrière la barre de navigation. On ne remonte
	   que le menu, pas toute la topbar, sinon elle recouvrirait le header
	   collant au défilement. */
	z-index: 1035;
}

/* Fallback for legacy Glyphicons referenced in existing widget content */
.glyphicon {
	font-family: 'bootstrap-icons' !important;
	font-style: normal;
	speak: none;
}
.glyphicon-earphone::before { content: "\f4d3"; }
.glyphicon-envelope::before { content: "\f32f"; }
.glyphicon-map-marker::before { content: "\f3c5"; }
.glyphicon-phone::before { content: "\f4d3"; }

/* =========================================================
   Header / navigation
   ========================================================= */
.site-header {
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(16, 30, 54, .06);
	z-index: 1030;
}

.bg-menu {
	background-color: #ffffff;
	padding: 0.5rem 0 !important;
}

.site-header .navbar {
	transition: padding .2s ease;
}

.site-header.is-scrolled .navbar {
	padding-top: .6rem !important;
	padding-bottom: .6rem !important;
	box-shadow: var(--deolys-shadow-sm);
}

.custom-logo-link img {
	max-height: 56px;
	width: auto;
}

.site-header .navbar-brand,
.navbar-nav .nav-link,
.navbar-nav .dropdown-menu .dropdown-item {
	font-family: 'Roboto', 'Inter', sans-serif;
}

.navbar-nav .nav-link {
	font-weight: 600;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--deolys-menu-link);
	padding-inline: .85rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link {
	color: var(--deolys-menu-link-active);
}

/* CTA du header : pilule turquoise */
.site-header .btn-primary {
	background-color: var(--deolys-primary);
	border-color: var(--deolys-primary);
	box-shadow: 0 6px 16px rgba(var(--deolys-indigo-rgb), .28);
}
.site-header .btn-primary:hover,
.site-header .btn-primary:focus {
	background-color: var(--deolys-primary-dark);
	border-color: var(--deolys-primary-dark);
}

.navbar-nav > .nav-item > .nav-link {
	position: relative;
}

.navbar-nav > .nav-item > .nav-link::after {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: 2px;
	height: 2px;
	background: var(--deolys-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}

.navbar-nav > .nav-item > .nav-link:hover::after,
.navbar-nav > .nav-item.active > .nav-link::after {
	transform: scaleX(1);
}

.navbar-nav .dropdown-menu {
	border: none;
	border-radius: var(--deolys-radius-sm);
	box-shadow: var(--deolys-shadow);
	padding: .5rem;
	margin-top: .5rem;
}

.navbar-nav .dropdown-menu {
	background-color: #fff;
}
.navbar-nav .dropdown-menu .nav-link,
.navbar-nav .dropdown-menu .dropdown-item,
.navbar-dark .navbar-nav .dropdown-menu .nav-link,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
	border-radius: 8px;
	padding: .55rem .85rem;
	font-weight: 500;
	color: var(--deolys-text);
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .nav-link:hover {
	background-color: var(--deolys-primary-light);
	color: var(--deolys-primary-dark);
}

@media (min-width: 992px) {
	.navbar-nav .dropdown:hover > .dropdown-menu {
		display: block;
	}
	/* Pont invisible sur l'écart de .5rem (margin-top) entre le lien et le
	   sous-menu : sans lui, le :hover se perd pendant la traversée et le
	   menu se referme avant qu'on puisse cliquer. */
	.navbar-nav .dropdown-menu::before {
		content: "";
		position: absolute;
		top: -.6rem;
		left: 0;
		right: 0;
		height: .6rem;
	}
}

/* =========================================================
   Page title band (interior pages)
   ========================================================= */
.page-title-band {
	background: var(--deolys-band-gradient);
	color: #fff;
	position: relative;
	overflow: hidden;
	border-bottom: 4px solid;
	border-image: var(--deolys-brand-line) 1;
}

/* Premium touches: faint blueprint grid + soft glow orbs, same language as the hero/CTA. */
.page-title-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 30%, transparent 80%);
	pointer-events: none;
}
.page-title-band::after {
	content: "";
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--deolys-primary);
	filter: blur(90px);
	opacity: .25;
	top: -180px;
	right: -80px;
	pointer-events: none;
}
.page-title-band .container {
	position: relative;
	z-index: 1;
}
.page-title-band .page-title {
	color: #fff;
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
}
.page-title-band .breadcrumb {
	--bs-breadcrumb-divider: '/';
	display: inline-flex;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: .35rem 1rem;
	backdrop-filter: blur(4px);
}
.page-title-band .breadcrumb-item,
.page-title-band .breadcrumb-item a {
	color: rgba(255, 255, 255, .65);
	font-size: .875rem;
}
.page-title-band .breadcrumb-item.active {
	color: rgba(255, 255, 255, .95);
}
.page-title-band .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, .4);
}

/* =========================================================
   Front page content (legacy WYSIWYG grid content)
   ========================================================= */
.front-entry .entry-content,
.page-entry .entry-content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--deolys-text);
}

.front-entry .entry-content > div[class*="col-"] > img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow-sm);
}

.front-entry .entry-content .row,
.front-entry .entry-content > div {
	--bs-gutter-x: 2rem;
}

.front-entry .entry-content > div[class*="col-md-4"],
.front-entry .entry-content > div[class*="col-md-3"] {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-top: 3px solid var(--deolys-primary);
	border-radius: var(--deolys-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--deolys-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Cycle the logo's ribbon hues across the 4 feature cards (Simplicité, Evolutif, Réactivité, Support) */
.front-entry .entry-content > div[class*="col-md-3"]:nth-of-type(4n+1) { border-top-color: var(--deolys-teal); }
.front-entry .entry-content > div[class*="col-md-3"]:nth-of-type(4n+2) { border-top-color: var(--deolys-orange); }
.front-entry .entry-content > div[class*="col-md-3"]:nth-of-type(4n+3) { border-top-color: var(--deolys-green); }
.front-entry .entry-content > div[class*="col-md-3"]:nth-of-type(4n+4) { border-top-color: var(--deolys-primary); }

.front-entry .entry-content > div[class*="col-md-4"]:hover,
.front-entry .entry-content > div[class*="col-md-3"]:hover {
	transform: translateY(-4px);
	box-shadow: var(--deolys-shadow);
}

.front-entry .entry-content > div[class*="col-md-4"] img,
.front-entry .entry-content > div[class*="col-md-3"] img {
	margin-bottom: 1rem;
}

.front-entry .entry-content > div.text-center {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

.front-entry .entry-content strong {
	color: var(--deolys-navy);
}

/* Hero treatment for the intro image + heading block */
.front-entry .entry-content > div.col-md-12:not(.text-center):first-child {
	margin-bottom: 0;
}

.front-entry .entry-content > div.col-md-12:not(.text-center):first-child img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--deolys-radius);
	margin: 0 0 -3rem;
	box-shadow: var(--deolys-shadow);
	position: relative;
	z-index: 1;
}

.front-entry .entry-content > div.text-center:has(h1) {
	background: linear-gradient(180deg, var(--deolys-primary-light) 0%, rgba(234, 241, 255, 0) 100%);
	border-radius: var(--deolys-radius);
	padding: 4rem 1.5rem 2.5rem;
	margin-bottom: 2rem;
	position: relative;
	z-index: 0;
}

.front-entry .entry-content > div.text-center:has(h1) h1 {
	position: relative;
	display: inline-block;
	padding-bottom: 1.25rem;
	max-width: 46rem;
}

.front-entry .entry-content > div.text-center:has(h1) h1::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	background: var(--deolys-primary);
	border-radius: 2px;
}

.front-entry .entry-content > div.text-center:has(h1) > p:first-of-type {
	max-width: 42rem;
	margin-inline: auto;
	color: var(--deolys-muted);
	font-size: 1.1rem;
}

/* Subtle reveal animation on scroll-into-view targets */
@media (prefers-reduced-motion: no-preference) {
	.front-entry .entry-content > div[class*="col-md-4"],
	.front-entry .entry-content > div[class*="col-md-3"] {
		animation: deolys-fade-up .5s ease both;
	}
}

@keyframes deolys-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Interior page content — colorful, structured treatment
   for legacy WYSIWYG pages/posts (page-entry / single-entry)
   ========================================================= */
.page-entry .entry-content,
.single-entry .entry-content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--deolys-text);
}

/* Section headings get a colored accent bar, cycling through the logo's 4 hues
   (rouge, orange, vert, cyan) so long pages read as colorful, branded sections
   instead of one flat black-on-white wall of text. */
.page-entry .entry-content h2,
.single-entry .entry-content h2 {
	position: relative;
	color: var(--deolys-navy);
	padding-left: 1.1rem;
	border-left: 4px solid var(--deolys-primary);
	font-weight: 600;
	letter-spacing: normal;
}
.page-entry .entry-content h2:nth-of-type(4n+1),
.single-entry .entry-content h2:nth-of-type(4n+1) { border-left-color: var(--deolys-teal); }
.page-entry .entry-content h2:nth-of-type(4n+2),
.single-entry .entry-content h2:nth-of-type(4n+2) { border-left-color: var(--deolys-orange); }
.page-entry .entry-content h2:nth-of-type(4n+3),
.single-entry .entry-content h2:nth-of-type(4n+3) { border-left-color: var(--deolys-green); }
.page-entry .entry-content h2:nth-of-type(4n+4),
.single-entry .entry-content h2:nth-of-type(4n+4) { border-left-color: var(--deolys-primary); }

.page-entry .entry-content h3,
.single-entry .entry-content h3 {
	color: var(--deolys-primary-dark);
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 500;
	letter-spacing: normal;
}
.page-entry .entry-content h3::before,
.single-entry .entry-content h3::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--deolys-teal);
	flex: 0 0 auto;
}
.page-entry .entry-content h3:nth-of-type(4n+1)::before,
.single-entry .entry-content h3:nth-of-type(4n+1)::before { background: var(--deolys-teal); }
.page-entry .entry-content h3:nth-of-type(4n+2)::before,
.single-entry .entry-content h3:nth-of-type(4n+2)::before { background: var(--deolys-orange); }
.page-entry .entry-content h3:nth-of-type(4n+3)::before,
.single-entry .entry-content h3:nth-of-type(4n+3)::before { background: var(--deolys-green); }
.page-entry .entry-content h3:nth-of-type(4n+4)::before,
.single-entry .entry-content h3:nth-of-type(4n+4)::before { background: var(--deolys-primary); }

.page-entry .entry-content p,
.single-entry .entry-content p {
	color: var(--deolys-text);
}

.page-entry .entry-content strong,
.single-entry .entry-content strong {
	color: var(--deolys-navy);	
}

.page-entry .entry-content a:not(.btn):not(.software-card-link),
.single-entry .entry-content a:not(.btn):not(.software-card-link) {
	color: var(--deolys-primary-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--deolys-primary-light);
	text-underline-offset: 2px;
}
.page-entry .entry-content a:not(.btn):not(.software-card-link):hover,
.single-entry .entry-content a:not(.btn):not(.software-card-link):hover {
	color: var(--deolys-primary);
	text-decoration-color: var(--deolys-primary);
}

/* Checklist-style bullets instead of plain black dots. */
.page-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb),
.single-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb) {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.page-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb) li,
.single-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb) li {
	position: relative;
	padding-left: 1.75rem;
}
/* Les puces se répartissent en colonnes tant qu'elles disposent d'au moins
   240px, puis repassent l'une sous l'autre. Sans cette largeur plancher, une
   liste de six items se comprimait en six colonnes illisibles (et le texte
   débordait sur mobile). Les listes de boutons des CTA gardent leur réglage. */
.page-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb):not(.deolys-cta-actions) > li,
.single-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb):not(.deolys-cta-actions) > li {
	flex: 1 1 240px;
}
.page-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb) li::before,
.single-entry .entry-content ul:not(.list-group):not(.pagination):not(.breadcrumb) li::before {
	content: "\f633"; /* bootstrap-icons check-circle-fill */
	font-family: "bootstrap-icons" !important;
	position: absolute;
	left: 0;
	top: .05em;
	color: var(--deolys-green);
	font-size: .95em;
}
/* Nested lists (legacy markup nests <ul><li style="list-style:none"><ul>...) keep it simple. */
.page-entry .entry-content ul ul,
.single-entry .entry-content ul ul {
	margin-top: .4rem;
}

/* "Voir aussi" internal-link blocks rendered as a colored card. */
.page-entry .entry-content h2:has(+ ul) + ul,
.single-entry .entry-content h2:has(+ ul) + ul {
	background: var(--deolys-primary-light);
	border-radius: var(--deolys-radius);
	padding: 1.5rem 1.5rem 1.5rem 2.5rem;
}

/* col-md-12 / col-md-* wrapper blocks from the legacy Bootstrap 3 grid: give every
   other block a soft tint + colored left border, cycling the logo hues, so long
   pages read as distinct branded sections instead of one grey wall. */
.page-entry .entry-content > div[class*="col-md-12"]:nth-of-type(odd),
.page-entry .entry-content .row > div[class*="col-md-12"]:nth-of-type(odd) {
	background: linear-gradient(135deg, var(--deolys-pastel-cyan) 0%, #ffffff 80%);
	border-radius: var(--deolys-radius);
	border-left: 4px solid var(--deolys-primary);
	padding: 1.75rem 2rem;
	margin-block: 1.5rem;
	transition: box-shadow .3s ease;
}
.page-entry .entry-content > div[class*="col-md-12"]:nth-of-type(odd):hover,
.page-entry .entry-content .row > div[class*="col-md-12"]:nth-of-type(odd):hover {
	box-shadow: var(--deolys-shadow-sm);
}
.page-entry .entry-content > div[class*="col-md-12"]:nth-of-type(4n+1),
.page-entry .entry-content .row > div[class*="col-md-12"]:nth-of-type(4n+1) {
	border-left-color: var(--deolys-teal);
	background: linear-gradient(135deg, var(--deolys-pastel-teal) 0%, #ffffff 80%);
}
.page-entry .entry-content > div[class*="col-md-12"]:nth-of-type(4n+3),
.page-entry .entry-content .row > div[class*="col-md-12"]:nth-of-type(4n+3) {
	border-left-color: var(--deolys-orange);
	background: linear-gradient(135deg, var(--deolys-pastel-orange) 0%, #ffffff 80%);
}

.page-entry .entry-content img,
.single-entry .entry-content img {
	max-width: 100%;
	height: auto;
	border-top: 3px solid var(--deolys-primary);
}
.page-entry .entry-content img:nth-of-type(4n+1),
.single-entry .entry-content img:nth-of-type(4n+1) { border-top-color: var(--deolys-teal); }
.page-entry .entry-content img:nth-of-type(4n+2),
.single-entry .entry-content img:nth-of-type(4n+2) { border-top-color: var(--deolys-orange); }
.page-entry .entry-content img:nth-of-type(4n+3),
.single-entry .entry-content img:nth-of-type(4n+3) { border-top-color: var(--deolys-green); }

/* =========================================================
   Front page — hero
   ========================================================= */
.hero-section {
	background:
		radial-gradient(ellipse 60% 50% at 8% 10%, var(--deolys-pastel-teal) 0%, transparent 55%),
		radial-gradient(ellipse 55% 45% at 95% 15%, var(--deolys-pastel-violet) 0%, transparent 55%),
		radial-gradient(ellipse 70% 60% at 85% 90%, var(--deolys-pastel-green) 0%, transparent 60%),
		linear-gradient(180deg, var(--deolys-pastel-cyan) 0%, #ffffff 75%);
}

/* Soft floating motion on the hero visual, TwinCSS-style playfulness. */
@media (prefers-reduced-motion: no-preference) {
	.hero-visual img {
		animation: deolys-float 6s ease-in-out infinite;
	}
}
@keyframes deolys-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

.hero-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	padding: .4rem .9rem;
	border-radius: 999px;
}

.hero-title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	line-height: 1.12;
	color: var(--deolys-navy);
}

.hero-subtitle {
	font-size: 1.15rem;
	color: var(--deolys-muted);
	max-width: 42rem;
}

.hero-proof {
	font-weight: 600;
	color: var(--deolys-navy);
	font-size: .95rem;
}
.hero-proof i {
	color: var(--deolys-green);
	margin-right: .4rem;
}

.hero-visual img {
	width: 100%;
	height: auto;
}

/* =========================================================
   Front page — software cards
   ========================================================= */
.bg-light-soft {
	background:
		radial-gradient(ellipse 50% 60% at 0% 100%, var(--deolys-pastel-orange) 0%, transparent 55%),
		radial-gradient(ellipse 50% 60% at 100% 0%, var(--deolys-pastel-cyan) 0%, transparent 55%),
		var(--deolys-bg);
}

.section-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--deolys-primary-dark);
	margin-bottom: .5rem;
}

.software-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	overflow: hidden;
	box-shadow: var(--deolys-shadow-sm);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
	display: flex;
	flex-direction: column;
}
.software-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(10, 30, 64, .16);
	border-color: transparent;
}
.software-card-image img {
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.software-card:hover .software-card-image img {
	transform: scale(1.05);
}

.software-card-image {
	aspect-ratio: 16 / 9;
	background: var(--deolys-bg);
	overflow: hidden;
}
.software-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.software-card > .software-card-icon,
.software-card > h3,
.software-card > p,
.software-card > .software-card-list,
.software-card > .software-card-link {
	margin-inline: 2rem;
}
.software-card > .software-card-link {
	margin-bottom: 2rem;
}

.software-card-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #fff;
	margin-top: -32px;
	margin-bottom: 1.25rem;
	box-shadow: var(--deolys-shadow-sm);
	position: relative;
	z-index: 1;
	transition: transform .2s ease;
}
.software-card:hover .software-card-icon {
	transform: scale(1.08);
}
.bg-icon-teal { background: var(--deolys-teal); }
.bg-icon-orange { background: var(--deolys-orange); }
.bg-icon-green { background: var(--deolys-green); }

/* Palette unifiée périwinkle — tous les produits partagent le même accent. */
.software-card-icon {
	background: linear-gradient(135deg, var(--deolys-primary) 0%, var(--deolys-blob-2) 100%);
}

.software-card h3 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: .75rem;
}

.software-card p {
	color: var(--deolys-muted);
}

.software-card-list {
	margin: 0 0 1.5rem;
	flex-grow: 1;
}
.software-card-list li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .5rem;
	font-size: .92rem;
	color: var(--deolys-text);
}
.software-card-list i {
	color: var(--deolys-green);
	margin-top: .2rem;
}

.software-card-link {
	font-weight: 700;
	color: var(--deolys-primary-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.software-card-link:hover {
	color: var(--deolys-primary);
	gap: .6rem;
}
.software-card-link i {
	transition: transform .15s ease;
}
.software-card-link:hover i {
	transform: translateX(2px);
}

/* =========================================================
   Front page — benefits
   ========================================================= */
.benefit-item {
	height: 100%;
	padding: 1.5rem;
	border-radius: var(--deolys-radius);
	background: var(--deolys-bg);
	border: 1px solid var(--deolys-border);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, background .3s ease;
}
.benefit-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--deolys-shadow);
	background: #fff;
}

.benefit-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--deolys-primary-light);
	color: var(--deolys-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	margin-bottom: .9rem;
	transition: background .25s ease, color .25s ease;
}
.benefit-item:hover .benefit-icon {
	background: var(--deolys-primary);
	color: #fff;
}
/* Bliss-style pastel icon chips, explicitly cycled per card in front-page.php. */
.benefit-icon.bg-icon-teal { background: var(--deolys-pastel-teal); color: var(--deolys-teal); }
.benefit-item:hover .benefit-icon.bg-icon-teal { background: var(--deolys-teal); color: #fff; }
.benefit-icon.bg-icon-orange { background: #FDF1E3; color: var(--deolys-orange); }
.benefit-item:hover .benefit-icon.bg-icon-orange { background: var(--deolys-orange); color: #fff; }
.benefit-icon.bg-icon-green { background: #E7F8EC; color: var(--deolys-green); }
.benefit-item:hover .benefit-icon.bg-icon-green { background: var(--deolys-green); color: #fff; }

.benefit-item h3 {
	font-size: 1.02rem;
	margin: 0 0 .4rem;
}

.benefit-item p {
	color: var(--deolys-muted);
	font-size: .92rem;
	margin: 0;
}

/* =========================================================
   Front page — geo SEO section
   ========================================================= */
.geo-section {
	background:
		radial-gradient(ellipse 45% 55% at 100% 100%, var(--deolys-pastel-green) 0%, transparent 55%),
		radial-gradient(ellipse 45% 55% at 0% 0%, var(--deolys-pastel-violet) 0%, transparent 55%),
		linear-gradient(135deg, var(--deolys-bg) 0%, #ffffff 100%);
}

.geo-list li {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 999px;
	padding: .4rem 1rem;
	font-weight: 600;
	font-size: .88rem;
	color: var(--deolys-navy);
}

/* Carte de France avec épingles */
.geo-map {
	position: relative;
	max-width: 340px;
	margin-inline: auto;
}
.geo-map::after {
	content: "";
	position: absolute;
	right: -20px;
	top: 20%;
	width: 120px;
	height: 55%;
	background-image: radial-gradient(rgba(15, 26, 51, .14) 1.5px, transparent 1.6px);
	background-size: 14px 14px;
	z-index: 0;
}
.geo-map svg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	display: block;
}
.geo-map-shape {
	fill: #CFE2F6;
	stroke: #B4D0EE;
	stroke-width: 1.5;
	stroke-linejoin: round;
}
.geo-map-pin path {
	fill: var(--deolys-primary);
}

.geo-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 2rem;
	box-shadow: var(--deolys-shadow-sm);
}
.geo-card-icon i {
	font-size: 2rem;
	color: var(--deolys-primary);
	margin-bottom: .75rem;
	display: inline-block;
}
.geo-card h3 {
	font-size: 1.15rem;
	margin-bottom: .75rem;
	color: var(--deolys-blue);
}
.geo-card p {
	color: var(--deolys-muted);
}
.geo-card-contact li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .75rem;
	font-size: .92rem;
}
.geo-card-contact li:last-child {
	margin-bottom: 0;
}
.geo-card-contact i {
	color: var(--deolys-primary);
	margin-top: .1rem;
}
.geo-card-contact address,
.geo-card-contact a {
	font-style: normal;
	font-weight: 600;
	color: var(--deolys-navy);
	text-decoration: none;
}
.geo-card-contact a:hover {
	color: var(--deolys-primary);
}

/* =========================================================
   Front page — CTA
   ========================================================= */
.cta-section {
	background: var(--deolys-band-gradient);
}
.cta-subtitle {
	color: rgba(255, 255, 255, .8);
	max-width: 40rem;
	font-size: 1.05rem;
}
.cta-section .btn-outline-light:hover {
	color: var(--deolys-navy);
}

/* Illustrations en trait, façon maquette */
.cta-illustration {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	opacity: .85;
	z-index: 1;
	pointer-events: none;
}
.cta-illustration-left {
	left: clamp(1rem, 6vw, 6rem);
	width: 150px;
	height: auto;
}
.cta-illustration-right {
	right: clamp(1rem, 6vw, 6rem);
	width: 135px;
	height: auto;
}

@media (min-width: 992px) {
	.py-lg-6 {
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;
	}
}

/* =========================================================
   Legacy WYSIWYG section backgrounds (Bootstrap 3 leftovers)
   ========================================================= */
.rw-gris-clair,
.rw-gris {
	background: var(--deolys-bg);
	border-radius: var(--deolys-radius);
	padding: 2rem;
	margin-block: 1.5rem;
}
.rw-gris-clair img,
.rw-gris img {
	border-radius: var(--deolys-radius-sm);
}

/* =========================================================
   Cards / listings
   ========================================================= */
.card {
	border-radius: var(--deolys-radius);
}

.entry.card {
	border-radius: var(--deolys-radius) !important;
	overflow: hidden;
}

.entry-title a {
	color: var(--deolys-navy);
}
.entry-title a:hover {
	color: var(--deolys-primary);
}

/* =========================================================
   Widgets
   ========================================================= */
.widget-area .widget,
.widget.card {
	border-radius: var(--deolys-radius);
	border: 1px solid var(--deolys-border);
}

.widget-title {
	color: var(--deolys-navy);
	letter-spacing: .04em;
	font-size: .8rem;
}

/* =========================================================
   Footer
   ========================================================= */
.bg-navy {
	background-color: var(--deolys-navy);
}
.site-footer.bg-navy {
	background-color: #0448AD;
	color: #fff;
	position: relative;
	overflow: hidden;
	border-top: 3px solid;
	border-image: var(--deolys-brand-line) 1;
}
/* Halos de marque discrets pour donner de la profondeur au fond sombre. */
.site-footer.bg-navy::before,
.site-footer.bg-navy::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.site-footer.bg-navy::before {
	top: -160px;
	left: -100px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(var(--deolys-indigo-rgb), .16) 0%, transparent 70%);
}
.site-footer.bg-navy::after {
	bottom: -180px;
	right: -120px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(15, 166, 160, .12) 0%, transparent 70%);
}
.site-footer .container {
	position: relative;
	z-index: 1;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}
.site-footer a:hover {
	color: #fff;
}

.site-footer .footer-menu {
	padding: 0;
	margin: 0;
}
.site-footer .footer-menu li {
	margin-bottom: .5rem;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.social-icon:hover {
	background: var(--deolys-primary);
}

/* =========================================================
   Comments & pagination
   ========================================================= */
.comment-list .comment-body {
	background: var(--deolys-bg);
	border-radius: var(--deolys-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.pagination .page-link {
	border-radius: var(--deolys-radius-sm);
	margin-inline: .15rem;
	border-color: var(--deolys-border);
	color: var(--deolys-text);
}
.pagination .page-item.active .page-link {
	background-color: var(--deolys-primary);
	border-color: var(--deolys-primary);
}

/* =========================================================
   Misc
   ========================================================= */
::selection {
	background: var(--deolys-primary-light);
	color: var(--deolys-navy);
}

.alert-info {
	background-color: var(--deolys-primary-light);
	border-color: var(--deolys-primary-light);
	color: var(--deolys-navy);
	border-radius: var(--deolys-radius);
}

@media (max-width: 991.98px) {
	.navbar-collapse {
		padding-top: 1rem;
	}
}

/* =========================================================
   Demande de démo — widget fixe (desktop) / bouton flottant (mobile)
   ========================================================= */
#deolys-demo-widget {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1045;
	display: flex;
	align-items: center;
}

.demo-widget-tab {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	background: var(--deolys-primary);
	color: #fff;
	border: none;
	padding: 1.1rem .6rem;
	border-radius: 10px 0 0 10px;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .02em;
	display: flex;
	align-items: center;
	gap: .5rem;
	box-shadow: var(--deolys-shadow);
	cursor: pointer;
}
.demo-widget-tab:hover {
	background: var(--deolys-primary-dark);
}
.demo-widget-tab i {
	writing-mode: horizontal-tb;
	transform: rotate(180deg);
}

.demo-widget-panel {
	width: 320px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--deolys-radius) 0 0 var(--deolys-radius);
	box-shadow: var(--deolys-shadow);
	padding: 1.75rem;
	position: relative;
	border-top: 3px solid var(--deolys-primary);
	border-bottom: 3px solid var(--deolys-primary);
}

/* Open by default; collapses to the vertical tab once dismissed. */
.demo-widget-tab {
	display: none;
}
#deolys-demo-widget.is-collapsed .demo-widget-panel {
	display: none;
}
#deolys-demo-widget.is-collapsed .demo-widget-tab {
	display: flex;
}

.demo-widget-close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	background: transparent;
	border: none;
	color: var(--deolys-muted);
	font-size: .9rem;
	line-height: 1;
	padding: .25rem;
}
.demo-widget-close:hover {
	color: var(--deolys-navy);
}

.demo-widget-title {
	font-size: 1.1rem;
	margin: 0 0 .35rem;
	padding-right: 1.5rem;
}
.demo-widget-subtitle {
	color: var(--deolys-muted);
	font-size: .875rem;
	margin-bottom: 1.1rem;
}

/* Contact Form 7 styling to match the design system, scoped to the demo widget/modal. */
.demo-widget-panel .wpcf7-form-control,
#deolysDemoModal .wpcf7-form-control {
	width: 100%;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius-sm);
	padding: .55rem .75rem;
	font-size: .9rem;
	margin-bottom: .85rem;
	background: var(--deolys-bg);
}
.demo-widget-panel textarea.wpcf7-form-control,
#deolysDemoModal textarea.wpcf7-form-control {
	min-height: 80px;
	resize: vertical;
}
.demo-widget-panel .wpcf7-form-control:focus,
#deolysDemoModal .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--deolys-primary);
	background: #fff;
	box-shadow: 0 0 0 3px var(--deolys-primary-light);
}
.demo-widget-panel label,
#deolysDemoModal label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--deolys-navy);
	margin-bottom: .1rem;
}
.demo-widget-panel .wpcf7-submit,
#deolysDemoModal .wpcf7-submit {
	width: 100%;
	background: var(--deolys-primary);
	color: #fff;
	border: none;
	border-radius: var(--deolys-radius-sm);
	padding: .65rem 1rem;
	font-weight: 700;
	margin-top: .25rem;
}
.demo-widget-panel .wpcf7-submit:hover,
#deolysDemoModal .wpcf7-submit:hover {
	background: var(--deolys-primary-dark);
}
.demo-widget-panel .wpcf7-not-valid-tip,
#deolysDemoModal .wpcf7-not-valid-tip {
	color: var(--deolys-red);
	font-size: .78rem;
	margin-top: -.6rem;
	margin-bottom: .6rem;
}
.demo-widget-panel .wpcf7-response-output,
#deolysDemoModal .wpcf7-response-output {
	border-radius: var(--deolys-radius-sm);
	font-size: .85rem;
	margin-top: .75rem;
	padding: .6rem .85rem;
}

/* =========================================================
   Barre d'action mobile (appel + démo), fixée en bas d'écran
   ========================================================= */
.mobile-action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1046;
	display: flex;
	gap: .5rem;
	padding: .2rem .2rem;
	/* Marge basse supplémentaire sur les écrans à encoche/barre gestuelle. */
	padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--deolys-border);
	box-shadow: 0 -6px 20px rgba(10, 30, 64, .10);
}
.mobile-action-bar__btn {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .8rem .5rem;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mobile-action-bar__btn i {
	font-size: 1rem;
}
.mobile-action-bar__btn--call {
	background: #fff;
	border-color: var(--deolys-primary);
	color: var(--deolys-primary);
}
.mobile-action-bar__btn--call:hover,
.mobile-action-bar__btn--call:active {
	background: var(--deolys-primary-light);
	color: var(--deolys-primary-dark);
}
.mobile-action-bar__btn--demo {
	background: var(--deolys-primary);
	border-color: var(--deolys-primary);
	color: #fff;
}
.mobile-action-bar__btn--demo:hover,
.mobile-action-bar__btn--demo:active {
	background: var(--deolys-primary-dark);
	border-color: var(--deolys-primary-dark);
	color: #fff;
}

/* Sur les écrans étroits, le libellé de la démo est raccourci pour que
   les deux boutons tiennent sur une ligne sans être tronqués. */
@media (max-width: 359.98px) {
	.mobile-action-bar__btn {
		font-size: .82rem;
		padding-inline: .35rem;
	}
}

/* Les décalages des éléments flottants sous la barre sont regroupés en fin de
   feuille : la règle de base de #deolys-back-to-top est déclarée plus bas et
   l'emporterait sinon (même spécificité, ordre de la cascade). */

/* Keep sticky-positioned page content clear of the fixed desktop widget tab. */
@media (min-width: 992px) {
	.site-content {
		scroll-padding-right: 60px;
	}
}

/* =========================================================
   V2 premium — hero (Stripe/Linear inspired)
   ========================================================= */
.hero-v2 {
	background: var(--deolys-band-gradient);
	padding-top: 2rem;
}

/* Faint blueprint grid, light-on-dark now that the hero sits on an indigo fill. */
.hero-v2-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}

.hero-eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--deolys-green);
	box-shadow: 0 0 0 4px rgba(18, 168, 58, .15);
	animation: deolys-pulse 2.2s ease-in-out infinite;
}
@keyframes deolys-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(18, 168, 58, .18); }
	50% { box-shadow: 0 0 0 7px rgba(18, 168, 58, .06); }
}

.hero-v2-title {
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
	line-height: 1.1;
	color: #fff;
	letter-spacing: -0.02em;
}

.text-gradient {
	background: linear-gradient(90deg, #fff 0%, var(--deolys-blob-3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-v2-subtitle {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, .82);
	max-width: 40rem;
	line-height: 1.7;
}

.btn-glow {
	box-shadow: 0 10px 30px rgba(var(--deolys-indigo-rgb), .35), 0 2px 8px rgba(var(--deolys-indigo-rgb), .25);
}

/* Sur les bandes indigo, le CTA principal passe en blanc pour rester lisible. */
.hero-v2 .btn-primary,
.gtlys-hero .btn-primary {
	background: #fff;
	border-color: #fff;
	color: var(--deolys-primary-dark);
}
.hero-v2 .btn-primary:hover,
.hero-v2 .btn-primary:focus,
.gtlys-hero .btn-primary:hover,
.gtlys-hero .btn-primary:focus {
	background: rgba(255, 255, 255, .88);
	border-color: rgba(255, 255, 255, .88);
	color: var(--deolys-primary-dark);
}
.hero-v2 .btn-glow,
.gtlys-hero .btn-glow {
	box-shadow: 0 10px 30px rgba(10, 30, 64, .28);
}

.btn-soft {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	font-weight: 600;
}
.btn-soft:hover {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
}

/* Browser-frame mockup around the product screenshot. */
.hero-frame {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--deolys-float-shadow);
	position: relative;
}
.hero-frame-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: .7rem 1rem;
	background: #F4F6FA;
	border-bottom: 1px solid var(--deolys-border);
}
.hero-frame-bar > span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #D9DFE9;
}
.hero-frame-bar > span:nth-child(1) { background: #F0A048; }
.hero-frame-bar > span:nth-child(2) { background: #F5D06E; }
.hero-frame-bar > span:nth-child(3) { background: #12A83A; }
.hero-frame-url {
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 8px;
	padding: .2rem 1.2rem;
	font-size: .78rem;
	color: var(--deolys-muted);
}
.hero-frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Floating feature chips over the mockup. */
.hero-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .7rem;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 14px;
	padding: .7rem 1rem;
	box-shadow: var(--deolys-shadow);
	z-index: 2;
}
.hero-chip i {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--deolys-pastel-cyan);
	color: var(--deolys-primary-dark);
	font-size: 1.1rem;
}
.hero-chip strong {
	display: block;
	font-size: .85rem;
	color: var(--deolys-navy);
}
.hero-chip small {
	color: var(--deolys-muted);
	font-size: .75rem;
}
.hero-chip-1 { top: 18%; left: -6px; animation: deolys-float 6s ease-in-out infinite; }
.hero-chip-2 { bottom: 10%; right: -6px; animation: deolys-float 7s ease-in-out 1s infinite; }
.hero-chip-2 i { background: var(--deolys-pastel-green); color: var(--deolys-green); }

@media (max-width: 991.98px) {
	.hero-chip { display: none; }
}

/* Section heading helper. */
.section-head { max-width: 46rem; }

/* =========================================================
   V2 premium — stats band
   ========================================================= */
.stats-band {
	padding-block: 3rem;
	border-top: 1px solid var(--deolys-border);
	border-bottom: 1px solid var(--deolys-border);
	background: #fff;
}
.stat-value {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	color: var(--deolys-navy);
	line-height: 1.1;
}
.stat-value span {
	background: linear-gradient(90deg, var(--deolys-primary), var(--deolys-teal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: .65em;
}
.stat-label {
	color: var(--deolys-muted);
	font-size: .92rem;
	margin-top: .25rem;
}

/* =========================================================
   V2 premium — software card refinements
   ========================================================= */
.software-card-tag {
	display: inline-block;
	align-self: flex-start;
	margin: 0 2rem .35rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--deolys-primary-dark);
	background: var(--deolys-primary-light);
	border-radius: 999px;
	padding: .25rem .7rem;
}

/* =========================================================
   V2 premium — testimonials
   ========================================================= */
.testimonials-section {
	background:
		radial-gradient(ellipse 45% 50% at 100% 0%, var(--deolys-pastel-teal) 0%, transparent 55%),
		radial-gradient(ellipse 45% 50% at 0% 100%, var(--deolys-pastel-orange) 0%, transparent 55%),
		var(--deolys-bg);
}

.testimonial-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 2rem;
	margin: 0;
	box-shadow: var(--deolys-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--deolys-shadow);
}

.testimonial-stars {
	color: #F5B301;
	font-size: .9rem;
	letter-spacing: 2px;
	margin-bottom: 1rem;
}

.testimonial-card blockquote {
	font-size: .98rem;
	line-height: 1.7;
	color: var(--deolys-text);
	margin-bottom: 1.5rem;
	flex-grow: 1;
}
.testimonial-card blockquote::before {
	content: "“";
	display: block;
	font-family: Georgia, serif;
	font-size: 2.4rem;
	line-height: .6;
	color: var(--deolys-primary);
	margin-bottom: .5rem;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: .85rem;
}
.testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .85rem;
	color: #fff;
	flex: 0 0 auto;
}
.testimonial-author strong {
	display: block;
	font-size: .92rem;
	color: var(--deolys-navy);
}
.testimonial-author small {
	color: var(--deolys-muted);
	font-size: .8rem;
}

/* =========================================================
   V2 premium — CTA orbs
   ========================================================= */
.cta-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .35;
	pointer-events: none;
}
.cta-orb-1 {
	width: 380px;
	height: 380px;
	background: var(--deolys-primary);
	top: -160px;
	left: -100px;
}
.cta-orb-2 {
	width: 320px;
	height: 320px;
	background: var(--deolys-blob-2);
	bottom: -140px;
	right: -80px;
}

/* =========================================================
   Blob background component (SaaSpal-style organic shapes)
   ========================================================= */
.deolys-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.deolys-blob {
	position: absolute;
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	filter: blur(48px);
	opacity: .35;
}
.deolys-blob-1 {
	width: 480px;
	height: 480px;
	top: -160px;
	left: -140px;
	background: var(--deolys-blob-1);
}
.deolys-blob-2 {
	width: 420px;
	height: 420px;
	bottom: -180px;
	right: -120px;
	background: var(--deolys-blob-2);
	opacity: .28;
}
.deolys-blob-3 {
	width: 300px;
	height: 300px;
	top: 30%;
	right: 8%;
	background: var(--deolys-blob-3);
	opacity: .2;
}
@media (max-width: 767.98px) {
	.deolys-blob-3 {
		display: none;
	}
}

/* =========================================================
   Wavy section-divider component (SaaSpal-style)
   ========================================================= */
.section-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	line-height: 0;
}
.section-wave svg {
	width: 100%;
	height: 100%;
	display: block;
}
.section-wave--flip {
	transform: scaleY(-1);
}

/* =========================================================
   V2 premium — footer
   ========================================================= */
.footer-desc {
	color: #fff;
	font-size: .95rem;
	line-height: 1.7;
}

.footer-title {
	position: relative;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #fff;
	padding-bottom: .7rem;
	margin-bottom: 1.1rem;
}
.footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

.footer-menu li {
	margin-bottom: .6rem;
}
.footer-menu a {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-size: .92rem;
	transition: color .15s ease, transform .2s ease;
}
/* Petit marqueur blanc qui apparaît au survol. */
.footer-menu a::before {
	content: "";
	width: 0;
	height: 2px;
	margin-right: 0;
	border-radius: 2px;
	background: #fff;
	transition: width .2s ease, margin-right .2s ease;
}
.footer-menu a:hover {
	color: #fff;
}
.footer-menu a:hover::before {
	width: 12px;
	margin-right: 8px;
}

.footer-contact li {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: .9rem;
	color: #fff;
	font-size: .92rem;
}
.footer-contact i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1rem;
}
.footer-contact a {
	color: #fff;
	text-decoration: none;
}
.footer-contact a:hover {
	color: #fff;
}

/* Boutons réseaux sociaux affinés. */
.social-icon {
	border: 1px solid rgba(255, 255, 255, .12);
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.social-icon:hover {
	background: var(--deolys-primary);
	border-color: var(--deolys-primary);
	transform: translateY(-3px);
}

.footer-divider {
	border-color: rgba(255, 255, 255, .12);
	opacity: 1;
	margin-block: 1.5rem;
}

.footer-bottom,
.footer-bottom a {	
	color: #d2e1f6;
  	text-decoration: none;
  	font-size: 0.9em;
}
.footer-bottom a:hover {
	color: #fff;
}

/* =========================================================
   Full-bleed section bands inside page content
   (same visual language as the homepage sections)
   ========================================================= */
.site-content {
	overflow-x: clip;
}

.deolys-band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-block: 3.5rem;
	margin-block: 2.5rem;
}
.deolys-band > .band-inner {
	max-width: 1296px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.deolys-band-soft {
	background:
		radial-gradient(ellipse 50% 60% at 0% 100%, var(--deolys-pastel-orange) 0%, transparent 55%),
		radial-gradient(ellipse 50% 60% at 100% 0%, var(--deolys-pastel-cyan) 0%, transparent 55%),
		var(--deolys-bg);
}

.deolys-band-teal {
	background:
		radial-gradient(ellipse 45% 50% at 100% 0%, var(--deolys-pastel-teal) 0%, transparent 55%),
		radial-gradient(ellipse 45% 50% at 0% 100%, var(--deolys-pastel-green) 0%, transparent 55%),
		var(--deolys-bg);
}

/* Inside a band, neutralize the interior-page H2 bar (bands use centered heads). */
.page-entry .entry-content .deolys-band .section-head h2 {
	border-left: none;
	padding-left: 0;
}

/* =========================================================
   Contact page — form card + info list
   ========================================================= */
.contact-form-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-top: 3px solid var(--deolys-primary);
	border-radius: var(--deolys-radius);
	padding: 2rem;
	box-shadow: var(--deolys-shadow);
}
.contact-form-card .wpcf7-form-control {
	width: 100%;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius-sm);
	padding: .65rem .85rem;
	font-size: .95rem;
	margin-bottom: .9rem;
	background: var(--deolys-bg);
}
.contact-form-card textarea.wpcf7-form-control {
	min-height: 120px;
	resize: vertical;
}
.contact-form-card .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--deolys-primary);
	background: #fff;
	box-shadow: 0 0 0 3px var(--deolys-primary-light);
}
.contact-form-card label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--deolys-navy);
	margin-bottom: .1rem;
}
.contact-form-card .wpcf7-submit {
	width: 100%;
	background: var(--deolys-primary);
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: .75rem 1rem;
	font-weight: 700;
	margin-top: .25rem;
	box-shadow: 0 6px 16px rgba(var(--deolys-indigo-rgb), .28);
}
.contact-form-card .wpcf7-submit:hover {
	background: var(--deolys-primary-dark);
}
.contact-form-card .wpcf7-not-valid-tip {
	color: var(--deolys-red);
	font-size: .8rem;
	margin-top: -.65rem;
	margin-bottom: .65rem;
}
.contact-form-card .wpcf7-response-output {
	border-radius: var(--deolys-radius-sm);
	font-size: .88rem;
	margin-top: .75rem;
	padding: .6rem .85rem;
}

.contact-info-list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.contact-info-list .benefit-icon {
	margin-bottom: 0;
	flex: 0 0 auto;
}
.contact-info-list strong {
	display: block;
	color: var(--deolys-navy);
	margin-bottom: .1rem;
}
.contact-info-list a {
	color: var(--deolys-primary-dark);
	text-decoration: none;
	font-weight: 600;
}

/* =========================================================
   Contact page — maquette dédiée (hero, cartes, formulaire)
   ========================================================= */
.contact-page .contact-main {
	background: var(--deolys-bg);
}

/* --- Hero --- */
.contact-hero {
	background: var(--deolys-band-gradient);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0 clamp(4.5rem, 3rem + 5vw, 7rem);
}
/* Le padding bas est porté par la section : la vague se cale sur le bord. */
.contact-hero .section-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
}
.contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 80%);
	pointer-events: none;
}
.contact-hero::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--deolys-primary);
	filter: blur(100px);
	opacity: .28;
	top: -200px;
	right: -60px;
	pointer-events: none;
}
.contact-hero .breadcrumb {
	--bs-breadcrumb-divider: '/';
	display: inline-flex;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: .35rem 1rem;
	margin-bottom: 0;
	backdrop-filter: blur(4px);
}
.contact-hero .breadcrumb-item,
.contact-hero .breadcrumb-item a {
	color: rgba(255, 255, 255, .65);
	font-size: .875rem;
	text-decoration: none;
}
.contact-hero .breadcrumb-item.active {
	color: rgba(255, 255, 255, .95);
}
.contact-hero .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, .4);
}
.contact-hero-title {
	color: #fff;
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
	font-weight: 700;
	margin: 0;
}
.contact-hero-lead {
	color: rgba(255, 255, 255, .78);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 34rem;
}

/* Icônes décoratives lumineuses (téléphone, mail, chat) */
.contact-hero-deco {
	position: relative;
	height: 220px;
}
.contact-hero-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(var(--deolys-indigo-rgb), .16);
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 46px rgba(var(--deolys-indigo-rgb), .45), inset 0 0 20px rgba(255, 255, 255, .06);
}
.contact-hero-icon-mail {
	width: 98px;
	height: 98px;
	font-size: 2.3rem;
	top: 0;
	right: 34px;
	background: rgba(var(--deolys-indigo-rgb), .26);
}
.contact-hero-icon-phone {
	width: 86px;
	height: 86px;
	font-size: 1.95rem;
	top: 66px;
	right: 168px;
}
.contact-hero-icon-chat {
	width: 78px;
	height: 78px;
	font-size: 1.7rem;
	top: 126px;
	right: 26px;
}

/* --- Carte présentation (colonne gauche) --- */
.contact-info-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-top: 3px solid var(--deolys-teal);
	border-radius: var(--deolys-radius);
	padding: 2rem;
	box-shadow: var(--deolys-shadow);
}
.contact-info-card .section-eyebrow {
	position: relative;
	display: inline-block;
	color: var(--deolys-teal);
	margin-bottom: .35rem;
}
.contact-info-title {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	position: relative;
}
.contact-info-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 3px;
	background: var(--deolys-teal);
}
.contact-info-text {
	color: var(--deolys-muted);
	font-size: .96rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

/* Encadré « Une équipe à votre service » */
.contact-team-box {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--deolys-pastel-cyan);
	border: 1px solid #D3ECF6;
	border-radius: var(--deolys-radius-sm);
	padding: 1.15rem 1.35rem;
}
.contact-team-title {
	font-size: 1rem;
	margin: 0 0 .3rem;
	color: var(--deolys-navy);
}
.contact-team-copy p {
	color: var(--deolys-muted);
	font-size: .88rem;
	line-height: 1.55;
}
.contact-team-illustration {
	flex: 0 0 auto;
	width: 130px;
	height: auto;
	color: var(--deolys-primary);
	opacity: .85;
}

/* --- En-tête du formulaire --- */
.contact-form-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.contact-form-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	background: var(--deolys-pastel-teal);
	color: var(--deolys-teal);
}
.contact-form-title {
	font-size: 1.3rem;
}
.contact-form-subtitle {
	color: var(--deolys-muted);
	font-size: .92rem;
	line-height: 1.5;
}

/* --- Grille & champs du formulaire CF7 --- */
.contact-form-card .cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}
.contact-form-card .cf7-field {
	display: block;
}
.contact-form-card .cf7-required-note {
	font-size: .82rem;
	color: var(--deolys-muted);
	margin: .25rem 0 1rem;
}
/* Champ quiz (anti-spam) : question en label, réponse en champ pleine largeur */
.contact-form-card .cf7-quiz-field .wpcf7-quiz-label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--deolys-navy);
	margin-bottom: .1rem;
}
.contact-form-card .cf7-quiz-field input.wpcf7-quiz {
	display: block;
}
/* Bouton d'envoi pleine largeur avec icône avion */
.contact-form-card .wpcf7-submit {
	background: linear-gradient(135deg, var(--deolys-primary) 0%, var(--deolys-primary-dark) 100%);
	text-align: center;
	padding-left: 2.5rem;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, var(--deolys-primary) 0%, var(--deolys-primary-dark) 100%);
	background-repeat: no-repeat;
	background-position: calc(50% - 3.4rem) center, center;
	background-size: 18px 18px, cover;
}
.contact-form-card .wpcf7-submit:hover {
	filter: brightness(1.05);
	background: linear-gradient(135deg, var(--deolys-primary-dark) 0%, var(--deolys-primary-dark) 100%);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, var(--deolys-primary-dark) 0%, var(--deolys-primary-dark) 100%);
	background-repeat: no-repeat;
	background-position: calc(50% - 3.4rem) center, center;
	background-size: 18px 18px, cover;
}

/* --- Blocs d'accompagnement --- */
.contact-benefit {
	background: #fff;
	display: flex;
	flex-direction: column;
}
.contact-benefit .benefit-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 1.3rem;
}
.contact-benefit-link {
	margin-top: auto;
	padding-top: .85rem;
	color: var(--deolys-primary-dark);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.contact-benefit-link i {
	transition: transform .2s ease;
}
.contact-benefit:hover .contact-benefit-link i {
	transform: translateX(4px);
}

/* --- Découvrir nos logiciels --- */
.contact-discover-title {
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
	padding-left: .85rem;
	border-left: 4px solid var(--deolys-primary);
	margin-bottom: 1.25rem;
}
.contact-software-box {
	background: var(--deolys-primary-light);
	border: 1px solid #CFEAF4;
	border-radius: var(--deolys-radius);
	padding: 1rem 1.5rem;
}
.contact-software-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 0;
	color: var(--deolys-primary-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid #CFEAF4;
	transition: color .2s ease, padding-left .2s ease;
}
.contact-software-link:last-child {
	border-bottom: none;
}
.contact-software-link i {
	color: var(--deolys-primary);
	font-size: .85rem;
	transition: transform .2s ease;
}
.contact-software-link:hover {
	color: var(--deolys-navy);
	padding-left: .35rem;
}
.contact-software-link:hover i {
	transform: translateX(3px);
}

@media (max-width: 575.98px) {
	.contact-form-card .cf7-grid {
		grid-template-columns: 1fr;
	}
	.contact-team-box {
		flex-direction: column;
		text-align: center;
	}
	.contact-team-illustration {
		width: 150px;
	}
}

/* =========================================================
   Reveal on scroll (elements get .deolys-reveal via main.js)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	.deolys-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
	}
	.deolys-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
	/* Stagger siblings slightly so grids cascade in. */
	.deolys-reveal:nth-child(2) { transition-delay: .08s; }
	.deolys-reveal:nth-child(3) { transition-delay: .16s; }
	.deolys-reveal:nth-child(4) { transition-delay: .24s; }
	.deolys-reveal:nth-child(5) { transition-delay: .32s; }
	.deolys-reveal:nth-child(6) { transition-delay: .40s; }
}

/* =========================================================
   Back to top button
   ========================================================= */
#deolys-back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 1040;
}
#deolys-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* =========================================================
   Page GTLYS — Logiciel Transport Express
   ========================================================= */

/* ----- Hero ----- */
.gtlys-hero {
	background: var(--deolys-band-gradient);
	color: #fff;
}
.gtlys-hero-glow {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
	pointer-events: none;
}
.gtlys-hero-eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #BBD6FF;
}
.gtlys-hero-title {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.35rem);
	line-height: 1.12;
	color: #fff;
	letter-spacing: -0.02em;
}
.gtlys-hero-lead {
	font-size: 1.12rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
	max-width: 34rem;
}
.gtlys-hero-badges {
	gap: 1.75rem !important;
}
.gtlys-hero-badges li {
	display: flex;
	align-items: center;
	gap: .7rem;
}
.gtlys-hero-badge-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--deolys-indigo-rgb), .18);
	border: 1px solid rgba(187, 214, 255, .25);
	color: #BBD6FF;
	font-size: 1.15rem;
}
.gtlys-hero-badges strong {
	display: block;
	font-size: .92rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.gtlys-hero-badges li > span:last-child {
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
}
.btn-hero-ghost {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .28);
	font-weight: 600;
}
.btn-hero-ghost:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}

/* Laptop mockup */
.gtlys-laptop {
	position: relative;
	max-width: 560px;
	margin-inline: auto;
	filter: drop-shadow(0 40px 60px rgba(10, 30, 64, .45));
}
.gtlys-laptop-screen {
	background: var(--deolys-indigo-deep);
	border: 10px solid #1E4380;
	border-radius: 16px 16px 0 0;
	padding: 6px;
	overflow: hidden;
}
.gtlys-laptop-screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.gtlys-laptop-base {
	height: 16px;
	background: linear-gradient(180deg, #2F62C4 0%, var(--deolys-navy-2) 100%);
	border-radius: 0 0 14px 14px;
	position: relative;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
}
.gtlys-laptop-base::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 6px;
	background: var(--deolys-indigo-deep);
	border-radius: 0 0 8px 8px;
}
/* Style épuré : les faisceaux lumineux sont retirés, les blobs suffisent. */
.gtlys-hero-streaks {
	display: none;
}

/* ----- Eyebrow avec pastille d'icône (maquette) ----- */
.gtlys-eyebrow-row {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: .75rem;
}
.gtlys-eyebrow-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--deolys-pastel-teal);
	color: var(--deolys-teal);
	font-size: 1.25rem;
}

/* ----- Checklist ----- */
.gtlys-check li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .45rem 0;
	font-weight: 500;
	color: var(--deolys-text);
}
.gtlys-check li i {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: .1rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--deolys-pastel-green);
	color: var(--deolys-green);
	font-size: .8rem;
	font-weight: 700;
}

/* ----- Media + floating card (solution section) ----- */
.gtlys-media {
	position: relative;
	padding-bottom: 1.5rem;
	padding-right: 1.5rem;
}
.gtlys-media-img {
	width: 100%;
	height: auto;
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow);
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.gtlys-media-card {
	position: absolute;
	right: 0;
	bottom: 0;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	box-shadow: var(--deolys-shadow);
	min-width: 260px;
	color: var(--deolys-primary);
}
.gtlys-media-card-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.gtlys-media-card-figures {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.gtlys-media-card-label {
	display: block;
	font-size: .74rem;
	color: var(--deolys-muted);
	font-weight: 600;
}
.gtlys-media-card-value {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: var(--deolys-navy);
	line-height: 1.1;
}
.gtlys-media-card-trend {
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	color: var(--deolys-green);
}
.gtlys-media-card-spark {
	display: block;
	flex: 1 1 auto;
	min-width: 110px;
	height: 44px;
	color: var(--deolys-primary);
}

/* ----- Feature cards : icône ronde à gauche, texte à droite (maquette) ----- */
.gtlys-feature,
.deolys-feature {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 1.75rem;
	box-shadow: var(--deolys-shadow-sm);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1.15rem;
	align-items: start;
}
.gtlys-feature:hover,
.deolys-feature:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(16, 30, 54, .12);
	border-color: transparent;
}
.gtlys-feature-icon,
.deolys-feature-icon {
	grid-row: 1 / span 2;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	margin-bottom: 0;
}
.gtlys-feature-icon.bg-icon-teal,
.deolys-feature-icon.bg-icon-teal { background: var(--deolys-pastel-teal); color: var(--deolys-teal); }
.gtlys-feature-icon.bg-icon-orange,
.deolys-feature-icon.bg-icon-orange { background: var(--deolys-pastel-orange); color: var(--deolys-orange); }
.gtlys-feature-icon.bg-icon-green,
.deolys-feature-icon.bg-icon-green { background: var(--deolys-pastel-green); color: var(--deolys-green); }
.gtlys-feature h3,
.deolys-feature h3 {
	grid-column: 2;
	font-size: 1.1rem;
	margin-bottom: .45rem;
	align-self: center;
}
.gtlys-feature p,
.deolys-feature p {
	grid-column: 2;
	color: var(--deolys-muted);
	font-size: .93rem;
	line-height: 1.6;
	margin-bottom: 0;
}

/* Soulignement du titre de la section fonctionnalités. */
#gtlys-features-title {
	position: relative;
	display: inline-block;
	padding-bottom: .9rem;
}
#gtlys-features-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 72px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--deolys-teal), var(--deolys-primary));
}

/* ----- Phone mockup : châssis type iPhone navy, encoche sur bandeau bleu ----- */
.gtlys-phone {
	position: relative;
	width: 240px;
	max-width: 100%;
	margin-inline: auto;
	background: linear-gradient(165deg, #1E4380 0%, var(--deolys-indigo-deep) 55%, var(--deolys-indigo-deep) 100%);
	border-radius: 42px;
	padding: 10px;
	box-shadow: 0 30px 60px rgba(10, 30, 64, .28), inset 0 1px 1px rgba(187, 214, 255, .25);
}
.gtlys-phone::before {
	content: "";
	position: absolute;
	right: -3px;
	top: 88px;
	width: 3px;
	height: 56px;
	border-radius: 0 3px 3px 0;
	background: #1E4380;
}
.gtlys-phone::after {
	content: "";
	position: absolute;
	left: -3px;
	top: 72px;
	width: 3px;
	height: 34px;
	border-radius: 3px 0 0 3px;
	background: #1E4380;
}
.gtlys-phone-notch {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 22px;
	background: var(--deolys-indigo-deep);
	border-radius: 0 0 15px 15px;
	z-index: 2;
}
.gtlys-phone-screen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
	background: #fff;
}

/* Écran d'app reconstitué (maquette « Mes courses ») */
.gtlys-app {
	overflow: hidden;
	background: var(--deolys-bg-soft, #F2F6FA);
	text-align: left;
	padding-bottom: .75rem;
}
.gtlys-app-header {
	background: linear-gradient(170deg, var(--deolys-navy) 0%, var(--deolys-primary-dark) 62%, var(--deolys-primary) 130%);
	color: #fff;
	padding: .55rem .9rem .85rem;
}
.gtlys-app-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .58rem;
	opacity: .85;
	margin-bottom: .85rem;
}
.gtlys-app-time {
	font-weight: 600;
}
.gtlys-app-status-icons {
	display: inline-flex;
	gap: .3rem;
	font-size: .62rem;
}
.gtlys-app-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .75rem;
	margin-bottom: .7rem;
}
.gtlys-app-title {
	font-weight: 700;
	font-size: .95rem;
}
.gtlys-app-tabs {
	display: flex;
	gap: .35rem;
}
.gtlys-app-tabs span {
	font-size: .62rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	padding: .18rem .55rem;
}
.gtlys-app-tabs span.is-active {
	background: var(--deolys-teal);
	border-color: var(--deolys-teal);
	color: #fff;
}
.gtlys-app-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: 12px;
	margin: .5rem .9rem 0;
	padding: .55rem .65rem;
}
.gtlys-app-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .7rem;
	color: var(--deolys-navy);
}
.gtlys-app-eta {
	font-size: .6rem;
	color: var(--deolys-muted);
}
.gtlys-app-route {
	display: block;
	font-size: .64rem;
	color: var(--deolys-muted);
	margin: .15rem 0 .3rem;
}
.gtlys-app-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .6rem;
	color: var(--deolys-muted);
}
.gtlys-app-pill {
	font-size: .56rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .12rem .5rem;
}
.gtlys-app-pill.is-progress {
	background: var(--deolys-pastel-green);
	color: var(--deolys-green);
}
.gtlys-app-pill.is-done {
	background: var(--deolys-pastel-teal);
	color: var(--deolys-teal);
}

/* ----- Stat tiles : grande icône colorée à gauche, valeur noire (maquette) ----- */
.gtlys-stat {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius-sm);
	padding: 1.1rem 1.25rem;
	text-align: left;
	box-shadow: var(--deolys-shadow-sm);
	height: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: .85rem;
	align-items: center;
}
.gtlys-stat-icon {
	grid-row: 1 / span 2;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
}
.gtlys-stat-icon-blue { color: var(--deolys-primary); background: var(--deolys-pastel-cyan); }
.gtlys-stat-icon-green { color: var(--deolys-green); background: var(--deolys-pastel-green); }
.gtlys-stat-icon-purple { color: #7B5CF0; background: #F0EBFE; }
.gtlys-stat-value {
	grid-column: 2;
	display: block;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	color: #101E36;
	line-height: 1.1;
}
.gtlys-stat-label {
	grid-column: 2;
	display: block;
	font-size: .82rem;
	color: var(--deolys-muted);
	margin-top: .1rem;
}

/* ----- Dashboard callout card ----- */
.gtlys-dash-card {
	background: linear-gradient(165deg, #F2FBFC 0%, #EDF9F6 100%);
	border: 1px solid rgba(15, 166, 160, .18);
	border-radius: var(--deolys-radius);
	padding: 1.75rem;
	box-shadow: var(--deolys-shadow-sm);
	height: 100%;
}
.gtlys-dash-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--deolys-border);
	color: var(--deolys-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.45rem;
	margin-bottom: 1rem;
	box-shadow: var(--deolys-shadow-sm);
}
.gtlys-dash-card h3 {
	font-size: 1.15rem;
	margin-bottom: .6rem;
}
.gtlys-dash-card p {
	color: var(--deolys-muted);
	font-size: .92rem;
	line-height: 1.65;
	margin-bottom: 1rem;
}

/* ----- Panneau unique relation client / pourquoi (maquette) ----- */
.gtlys-duo {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 2.5rem;
	box-shadow: var(--deolys-shadow-sm);
}
.gtlys-duo-truck {
	position: absolute;
	right: 2rem;
	bottom: 1.5rem;
	width: 190px;
	height: auto;
	color: var(--deolys-primary);
	opacity: .22;
	pointer-events: none;
}
/* Colonne « Pourquoi GTLYS » : dégradé blanc → bleu foncé très clair sur
   toute la hauteur du panneau, avec fin séparateur vertical visible. */
@media (min-width: 992px) {
	.gtlys-duo::before {
		content: "";
		position: absolute;
		inset: 0 0 0 50%;
		background: linear-gradient(140deg, #FFFFFF 0%, #E3EBF7 100%);
		border-left: 1px solid #DCE3EE;
		pointer-events: none;
	}
	.gtlys-duo .row {
		position: relative;
	}
}
@media (max-width: 991.98px) {
	.gtlys-duo .col-lg-6:last-child {
		background: linear-gradient(140deg, #FFFFFF 0%, #E3EBF7 100%);
		border: 1px solid #DCE3EE;
		border-radius: 14px;
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
}
@media (max-width: 991.98px) {
	.gtlys-duo { padding: 1.75rem; }
	.gtlys-duo-truck { display: none; }
}

/* ----- Voir aussi bar ----- */
.gtlys-seealso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius-sm);
	padding: 1rem 1.5rem;
	box-shadow: var(--deolys-shadow-sm);
	font-size: .9rem;
}
.gtlys-seealso-label {
	font-weight: 700;
	color: var(--deolys-navy);
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .05em;
	white-space: nowrap;
}
.gtlys-seealso-label i { color: var(--deolys-primary); }
.gtlys-seealso-intro {
	color: var(--deolys-muted);
}
.gtlys-seealso-intro a {
	white-space: normal;
}
.gtlys-seealso a {
	color: var(--deolys-primary-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.gtlys-seealso a:hover { color: var(--deolys-primary); }
.gtlys-seealso a i { font-size: .8rem; }

/* =========================================================
   Batilys — page dédiée
   ========================================================= */
/* Hero : fil d'Ariane + photo à droite qui déborde */
.batilys-breadcrumb {
	font-size: .85rem;
	color: rgba(255, 255, 255, .55);
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.batilys-breadcrumb a {
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
}
.batilys-breadcrumb a:hover { color: #fff; }

.batilys-crumb-brand {
	color: #2AC6E0;
	font-weight: 600;
}

/* Eyebrow « Batilys » : cyan vif, casse et taille de la maquette. */
.batilys-hero-eyebrow {
	text-transform: none;
	letter-spacing: .01em;
	font-size: 1.2rem;
	font-weight: 700;
	color: #BBD6FF;
}

.batilys-hero-badges {
	gap: 1.1rem 1.75rem !important;
}
.batilys-hero-badges li { flex: 0 0 auto; }

/* Desktop : les 4 badges sur une seule ligne, la rangée peut déborder
   sur la photo (elle passe au-dessus, comme la maquette). */
@media (min-width: 992px) {
	.batilys-hero-badges {
		flex-wrap: nowrap !important;
		width: max-content;
		max-width: none;
		position: relative;
		z-index: 3;
	}
	/* Boutons : côte à côte, un peu plus compacts (maquette). */
	.batilys-hero-actions {
		flex-wrap: nowrap !important;
		width: max-content;
		position: relative;
		z-index: 3;
	}
	.batilys-hero-actions .btn-lg {
		padding-inline: 1.35rem;
		font-size: 1rem;
		white-space: nowrap;
	}
}

/* Icônes des badges : carrés turquoise pleins, pictos blancs (maquette). */
.batilys-hero .gtlys-hero-badge-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 12px;
	border: none;
	background: linear-gradient(135deg, var(--deolys-primary) 0%, var(--deolys-blob-2) 100%);
	color: #fff;
	font-size: 1.25rem;
	box-shadow: 0 6px 14px rgba(var(--deolys-indigo-rgb), .3);
}
.batilys-hero .gtlys-hero-badges strong {
	font-size: .95rem;
}
.batilys-hero .gtlys-hero-badges li > span:last-child {
	font-size: .85rem;
	color: rgba(255, 255, 255, .75);
}

/* Badge « Données sécurisées en France » : pastille sombre comme la maquette. */
.batilys-badge-pill {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 14px;
	padding: .5rem .9rem .5rem .5rem;
}

/* La photo occupe toute la colonne et reste entière (jamais recadrée). */
.batilys-hero-media {
	position: relative;
}
.batilys-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-float-shadow);
}
@media (min-width: 992px) {
	.batilys-hero .row { min-height: 540px; }
}

/* Mockup tableau de bord */
.bat-dash {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow);
	overflow: hidden;
}
.bat-dash-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: .7rem 1rem;
	background: #F1F4F9;
	border-bottom: 1px solid var(--deolys-border);
}
.bat-dash-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #CBD5E1;
}
.bat-dash-dot:nth-child(1) { background: #F87171; }
.bat-dash-dot:nth-child(2) { background: #FBBF24; }
.bat-dash-dot:nth-child(3) { background: #34D399; }
.bat-dash-body { display: flex; }
.bat-dash-side {
	flex: 0 0 132px;
	background: var(--deolys-navy);
	color: rgba(255, 255, 255, .75);
	padding: 1rem .7rem;
}
.bat-dash-brand {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	color: #fff;
	font-size: 1.05rem;
	margin-bottom: 1rem;
	padding-left: .3rem;
}
.bat-dash-brand-d { color: var(--deolys-primary); }
.bat-dash-nav { list-style: none; margin: 0; padding: 0; }
.bat-dash-nav li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .72rem;
	padding: .45rem .5rem;
	border-radius: 8px;
	margin-bottom: .15rem;
	white-space: nowrap;
}
.bat-dash-nav li.is-active {
	background: rgba(var(--deolys-indigo-rgb), .18);
	color: #fff;
}
.bat-dash-nav i { font-size: .85rem; opacity: .9; }
.bat-dash-main { flex: 1 1 auto; padding: 1rem 1.1rem; min-width: 0; }
.bat-dash-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .9rem;
}
.bat-dash-title { font-weight: 700; color: var(--deolys-navy); font-size: .95rem; }
.bat-dash-newbtn {
	background: var(--deolys-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	padding: .3rem .7rem;
	border-radius: 50px;
}
.bat-dash-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .55rem;
	margin-bottom: .9rem;
}
.bat-dash-kpi {
	background: var(--deolys-bg);
	border: 1px solid var(--deolys-border);
	border-radius: 10px;
	padding: .55rem .5rem;
	text-align: left;
}
.bat-dash-kpi-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	font-size: .72rem;
	margin-bottom: .3rem;
}
.bat-dash-kpi-val {
	display: block;
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--deolys-navy);
	line-height: 1;
}
.bat-dash-kpi-lab { display: block; font-size: .6rem; color: var(--deolys-muted); margin-top: .15rem; }
.bat-i-teal   { background: var(--deolys-pastel-teal);   color: var(--deolys-teal); }
.bat-i-orange { background: var(--deolys-pastel-orange); color: var(--deolys-orange); }
.bat-i-red    { background: #FDECEC;                     color: var(--deolys-red); }
.bat-i-green  { background: var(--deolys-pastel-green);  color: var(--deolys-green); }

.bat-dash-cols {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: .7rem;
}
.bat-dash-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.bat-dash-col .mt-2 { flex: 1 1 auto; }

/* Interventions récentes */
.bat-dash-interv { list-style: none; margin: 0; padding: 0; }
.bat-dash-interv li {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem 0;
}
.bat-dash-interv-dot {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.bat-d-green  { background: var(--deolys-green); }
.bat-d-orange { background: var(--deolys-orange); }
.bat-dash-interv-txt {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .64rem;
	color: var(--deolys-text);
}
.bat-dash-interv-state {
	flex: 0 0 auto;
	font-size: .56rem;
	font-weight: 700;
	padding: .12rem .45rem;
	border-radius: 50px;
}
.bat-dash-interv-state.is-done     { background: var(--deolys-pastel-green);  color: var(--deolys-green); }
.bat-dash-interv-state.is-progress { background: var(--deolys-pastel-orange); color: var(--deolys-orange); }

.bat-dash-agenda-more {
	display: block;
	text-align: right;
	font-size: .62rem;
	font-weight: 700;
	color: var(--deolys-primary);
	margin-top: .3rem;
}
.bat-dash-panel {
	background: var(--deolys-bg);
	border: 1px solid var(--deolys-border);
	border-radius: 10px;
	padding: .7rem .8rem;
}
.bat-dash-panel-title {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	color: var(--deolys-navy);
	margin-bottom: .5rem;
}
.bat-dash-chart { width: 100%; height: 70px; display: block; }
.bat-dash-agenda { list-style: none; margin: 0; padding: 0; }
.bat-dash-agenda li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .32rem 0 .32rem .55rem;
	border-left: 2px solid var(--deolys-border);
	margin-bottom: .3rem;
}
.bat-dash-agenda li.bat-a-teal   { border-left-color: var(--deolys-teal); }
.bat-dash-agenda li.bat-a-orange { border-left-color: var(--deolys-orange); }
.bat-dash-agenda li.bat-a-green  { border-left-color: var(--deolys-green); }
.bat-dash-agenda-time { font-size: .62rem; font-weight: 700; color: var(--deolys-muted); flex: 0 0 30px; padding-top: .05rem; }
.bat-dash-agenda-txt { font-size: .64rem; color: var(--deolys-text); line-height: 1.35; }
.bat-dash-agenda-txt strong { display: block; font-size: .68rem; color: var(--deolys-navy); }

/* Fonctionnalités : trait teal centré sous le titre (maquette). */
.batilys-section-head h2 {
	position: relative;
	padding-bottom: 1rem;
}
.batilys-section-head h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--deolys-teal);
}

/* Cartes fonctionnalités : icône et titre sur la même ligne (maquette). */
/* Batilys garde sa mise en page en bloc (en-tête icône + titre, puis texte). */
.batilys-feature {
	display: block;
}
.batilys-feature-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .8rem;
}
.batilys-feature-head .gtlys-feature-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 999px;
	font-size: 1.25rem;
	margin-bottom: 0;
}
.batilys-feature-head h3 {
	margin: 0;
	font-size: 1.02rem;
}

/* Pour qui — barre verticale cyan sur toute la hauteur du titre (maquette). */
.batilys-title-bar {
	position: relative;
	padding-left: 18px;
}
.batilys-title-bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 4px;
	border-radius: 4px;
	background: var(--deolys-primary);
}
.batilys-metiers li {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .55rem 0;
	font-weight: 600;
	color: var(--deolys-text);
	border-bottom: 1px solid var(--deolys-border);
}
.batilys-metiers li:last-child { border-bottom: none; }
.batilys-metiers-check { color: var(--deolys-green); font-size: 1rem; }
.batilys-metiers-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: .95rem;
}
.bat-i-blue   { background: var(--deolys-pastel-cyan);   color: var(--deolys-blue); }
.bat-i-violet { background: var(--deolys-pastel-violet); color: var(--deolys-violet); }

/* Photo "pour qui" + carte support */
.batilys-forwho-media img {
	width: 100%;
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow);
	display: block;
}
.batilys-support-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow-sm);
	padding: 1.5rem;
	margin-top: 1.25rem;
}
.batilys-support-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--deolys-pastel-cyan);
	color: var(--deolys-primary);
	font-size: 1.35rem;
}
.batilys-support-card h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.batilys-support-card p { color: var(--deolys-muted); font-size: .92rem; }

/* Voir aussi */
.batilys-seealso-title {
	position: relative;
	font-size: 1.4rem;
	padding-left: 16px;
	margin-bottom: 1rem;
}
.batilys-seealso-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 4px;
	border-radius: 4px;
	background: var(--deolys-primary);
}

.batilys-seealso-band {
	background: linear-gradient(135deg, var(--deolys-pastel-cyan) 0%, #F3FAFD 100%);
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 2rem 2.25rem;
}
.batilys-seealso-list li { margin-bottom: .35rem; }
.batilys-seealso-list li:last-child { margin-bottom: 0; }
.batilys-seealso-list a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: var(--deolys-navy);
	text-decoration: none;
	font-weight: 600;
	padding: .3rem 0;
	transition: gap .2s ease, color .15s ease;
}
.batilys-seealso-list a i { color: var(--deolys-primary); font-size: .8rem; }
.batilys-seealso-list a:hover { color: var(--deolys-primary); gap: .9rem; }
.batilys-seealso-illu {
	width: 100%;
	height: auto;
	color: var(--deolys-primary);
	opacity: .8;
}

/* Batilys — responsive */
@media (max-width: 767.98px) {
	.bat-dash-cols { grid-template-columns: 1fr; }
	.bat-dash-side { flex-basis: 46px; padding-inline: .4rem; }
	.bat-dash-brand { font-size: 0; }
	.bat-dash-brand-d { font-size: 1.05rem; }
	.bat-dash-nav li span { display: none; }
	.bat-dash-nav li { justify-content: center; }
}
@media (max-width: 575.98px) {
	.bat-dash-kpis { grid-template-columns: repeat(2, 1fr); }
	.batilys-seealso-band { padding: 1.5rem 1.25rem; }
	.batilys-support-card { flex-direction: column; }
}

/* =========================================================
   Page Reprolys — Logiciel reprographie & imprimerie
   ========================================================= */

/* ----- Hero ----- */
.reprolys-hero-eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #BBD6FF;
	background: rgba(var(--deolys-indigo-rgb), .14);
	border: 1px solid rgba(187, 214, 255, .35);
	border-radius: 999px;
	padding: .45rem 1rem;
}
.reprolys-hero-badges {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 1rem !important;
	max-width: 40rem;
	position: relative;
	z-index: 4;
}
.reprolys-hero-badges li {
	align-items: flex-start;
	gap: .55rem;
}
/* Colonne texte au premier plan pour que les badges qui débordent restent
   au-dessus de l'image du laptop. */
@media (min-width: 992px) {
	.reprolys-hero > .container > .row > .col-lg-6:first-child { position: relative; z-index: 5; }
	.reprolys-hero > .container > .row > .col-lg-6:last-child  { position: relative; z-index: 1; }
	.reprolys-hero-badges {
		max-width: none;
		width: calc(100% + 210px);
	}
}
@media (max-width: 991.98px) {
	.reprolys-hero-badges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 30rem;
	}
}
@media (max-width: 359.98px) {
	.reprolys-hero-badges { grid-template-columns: 1fr; }
}
/* Photo d'impression couleur fondue dans le navy, derrière le laptop. */
/* Style épuré : la photo de fond et son voile sombre sont retirés,
   le hero partage le même langage que les autres (dégradé + blobs + vague). */
.reprolys-hero-backdrop {
	display: none;
}
.reprolys-hero::after {
	content: none;
}
.reprolys-hero .container { z-index: 1; }

/* ----- Diagramme orbital (la gestion pensée) ----- */
.reprolys-orbit-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow-sm);
	padding: 2rem 1.5rem;
}
.reprolys-orbit {
	position: relative;
	max-width: 460px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
.reprolys-orbit-ring {
	position: absolute;
	inset: 14%;
	border: 2px dashed color-mix(in srgb, var(--deolys-primary) 30%, #fff);
	border-radius: 50%;
}
.reprolys-orbit-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.reprolys-orbit-hex {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	font-size: 2.6rem;
	color: #fff;
	filter: drop-shadow(0 12px 24px rgba(15, 166, 160, .32));
}
.reprolys-orbit-hex-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.reprolys-orbit-hex .bi {
	position: relative;
	z-index: 1;
}
/* Chaque nœud est ancré par le centre de son icône, posée exactement sur
   l'anneau ; le libellé flotte juste en dessous sans décaler l'icône. */
.reprolys-orbit-node {
	position: absolute;
	transform: translate(-50%, -50%);
}
.reprolys-orbit-label {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	text-align: center;
}
.reprolys-orbit-node strong {
	font-size: .88rem;
	line-height: 1.25;
	color: var(--deolys-navy);
}
.reprolys-orbit-node small {
	font-size: .74rem;
	line-height: 1.35;
	color: var(--deolys-muted);
}
.reprolys-orbit-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	box-shadow: var(--deolys-shadow-sm);
	background: #fff;
}
.reprolys-orbit-icon.icon-blue   { background: var(--deolys-pastel-cyan);   color: var(--deolys-blue); }
.reprolys-orbit-icon.icon-green  { background: var(--deolys-pastel-green);  color: var(--deolys-green); }
.reprolys-orbit-icon.icon-violet { background: var(--deolys-pastel-violet); color: var(--deolys-violet); }
.reprolys-orbit-icon.icon-orange { background: var(--deolys-pastel-orange); color: var(--deolys-orange); }
.reprolys-orbit-icon.icon-teal   { background: var(--deolys-pastel-teal);   color: var(--deolys-teal); }
.reprolys-orbit-node .txt-blue   { color: var(--deolys-blue); }
.reprolys-orbit-node .txt-green  { color: var(--deolys-green); }
.reprolys-orbit-node .txt-violet { color: var(--deolys-violet); }
.reprolys-orbit-node .txt-orange { color: color-mix(in srgb, var(--deolys-orange) 80%, #000); }
.reprolys-orbit-node .txt-teal   { color: var(--deolys-teal); }
/* Positions : icônes posées sur l'anneau (rayon 36%, centre 50%).
   Devis en haut, Clients / Production sur les flancs, Facturation / Livraison en bas. */
.reprolys-orbit-node.is-top          { top: 14%;   left: 50%; }
.reprolys-orbit-node.is-left         { top: 34.8%; left: 17.4%; }
.reprolys-orbit-node.is-right        { top: 34.8%; left: 82.6%; }
.reprolys-orbit-node.is-bottom-left  { top: 73.1%; left: 22.4%; }
.reprolys-orbit-node.is-bottom-right { top: 73.1%; left: 77.6%; }

@media (max-width: 575.98px) {
	.reprolys-orbit {
		max-width: none;
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.25rem;
	}
	.reprolys-orbit-ring,
	.reprolys-orbit-center { display: none; }
	.reprolys-orbit-node,
	.reprolys-orbit-node.is-top,
	.reprolys-orbit-node.is-left,
	.reprolys-orbit-node.is-right,
	.reprolys-orbit-node.is-bottom-left,
	.reprolys-orbit-node.is-bottom-right {
		position: static;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.reprolys-orbit-label {
		position: static;
		transform: none;
		width: auto;
		margin-top: .5rem;
	}
}

/* ----- Fonctionnalités : cartes verticales, titre bleu ----- */
.reprolys-feature {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	padding: 1.75rem 1.5rem;
	box-shadow: var(--deolys-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	row-gap: 1rem;
	align-items: center;
}
.reprolys-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--deolys-shadow);
}
.reprolys-feature-icon {
	grid-column: 1;
	grid-row: 1;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin: 0;
}
.reprolys-feature-icon.icon-green  { background: var(--deolys-pastel-green);  color: var(--deolys-green); }
.reprolys-feature-icon.icon-orange { background: var(--deolys-pastel-orange); color: var(--deolys-orange); }
.reprolys-feature-icon.icon-violet { background: var(--deolys-pastel-violet); color: var(--deolys-violet); }
.reprolys-feature-icon.icon-teal   { background: var(--deolys-pastel-teal);   color: var(--deolys-teal); }
.reprolys-feature h3 {
	grid-column: 2;
	grid-row: 1;
	font-size: 1rem;
	font-weight: 700;
	color: var(--deolys-primary-dark);
	margin: 0;
}
.reprolys-feature p {
	grid-column: 1 / -1;
	grid-row: 2;
	color: var(--deolys-muted);
	font-size: .93rem;
	line-height: 1.6;
	margin-bottom: 0;
}

/* Titre de la section fonctionnalités : sur une seule ligne, police réduite. */
.reprolys-page .section-head { max-width: none; }
.reprolys-page #gtlys-features-title { font-size: 1.5rem; }
.reprolys-page .section-head > p.text-muted { max-width: 46rem; margin-inline: auto; }
@media (min-width: 768px) {
	.reprolys-page #gtlys-features-title { white-space: nowrap; }
}

/* ----- Relation clients ----- */
.reprolys-check-box {
	background: var(--deolys-primary-light);
	border-radius: var(--deolys-radius);
	padding: 1.75rem;
}
.reprolys-check-box .gtlys-check li:last-child { margin-bottom: 0; }
.reprolys-photo {
	border-radius: var(--deolys-radius);
	overflow: hidden;
	box-shadow: var(--deolys-shadow);
	height: 100%;
	max-height: 380px;
}
.reprolys-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- Voir aussi + carte métiers ----- */
.reprolys-seealso {
	background: var(--deolys-primary-light);
	border-radius: var(--deolys-radius);
	padding: 1.5rem 1.75rem;
}
.reprolys-seealso li + li { margin-top: .55rem; }
.reprolys-seealso a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--deolys-navy);
	text-decoration: none;
}
.reprolys-seealso a:hover { color: var(--deolys-primary-dark); }
.reprolys-seealso a i {
	color: var(--deolys-primary);
	font-size: .8rem;
	transition: transform .15s ease;
}
.reprolys-seealso a:hover i { transform: translateX(3px); }
.reprolys-seealso-title { font-size: 1.35rem; }

.reprolys-metiers-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow-sm);
	padding: 1.75rem;
	height: 100%;
}
.reprolys-metiers-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	background: var(--deolys-pastel-cyan);
	color: var(--deolys-primary);
	margin-bottom: .9rem;
}
.reprolys-metiers-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--deolys-primary-dark);
	margin-bottom: .5rem;
}
.reprolys-metiers-card p {
	color: var(--deolys-muted);
	font-size: .95rem;
	line-height: 1.65;
}

/* =========================================================
   FAQ (accordéon natif <details>) — fiches produits + pages SEO
   ========================================================= */
.deolys-faq {
	max-width: 1200px;
}
.deolys-faq-item {
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius-sm);
	background: #fff;
	padding: 1rem 1.25rem;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.deolys-faq-item[open] {
	border-color: var(--deolys-primary);
	box-shadow: var(--deolys-shadow-sm);
}
.deolys-faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	color: var(--deolys-navy);
}
.deolys-faq-item summary::-webkit-details-marker {
	display: none;
}
.deolys-faq-item summary::after {
	content: "\f4fe"; /* bootstrap-icons plus-lg */
	font-family: "bootstrap-icons" !important;
	font-size: .85rem;
	color: var(--deolys-primary);
	flex: 0 0 auto;
	transition: transform .2s ease;
}
.deolys-faq-item[open] summary::after {
	content: "\f2ea"; /* bootstrap-icons dash-lg */
}
.deolys-faq-item summary:focus-visible {
	outline: 2px solid var(--deolys-primary);
	outline-offset: 3px;
	border-radius: 4px;
}
.deolys-faq-item > p {
	margin-bottom: 0;
}

/* =========================================================
   Bloc CTA de fin de page (pages SEO / atterrissage)
   ========================================================= */
.deolys-cta {
	margin: 2.5rem 0 1.5rem;
	padding: 2rem 2.25rem;
	border-radius: var(--deolys-radius);
	background: var(--deolys-band-gradient);
	color: #fff;
	box-shadow: var(--deolys-shadow);
}
.deolys-cta h2,
.page-entry .entry-content .deolys-cta h2 {
	color: #fff;
	border-left: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: .6rem;
}
.deolys-cta p {
	color: rgba(255, 255, 255, .85);
	margin-bottom: 1.25rem;
	max-width: 60ch;
}
.deolys-cta .deolys-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
}
.deolys-cta .deolys-cta-actions li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.deolys-cta .deolys-cta-actions li::before {
	display: none;
}
.deolys-cta .btn-light {
	background: #fff;
	color: var(--deolys-navy);
	font-weight: 600;
}
.deolys-cta .btn-outline-light {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}
.deolys-cta .btn-outline-light:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

/* Tableaux comparatifs dans le contenu SEO */
.page-entry .entry-content .table,
.single-entry .entry-content .table {
	margin-bottom: 1.5rem;
}
.page-entry .entry-content .table thead th {
	background: var(--deolys-navy);
	color: #fff;
	border-color: var(--deolys-navy);
	vertical-align: middle;
}
.page-entry .entry-content .table td,
.page-entry .entry-content .table th {
	vertical-align: middle;
}

/* Sur mobile, un tableau à 3 colonnes devient illisible (colonnes de ~100px).
   Chaque ligne est donc transformée en carte, l'intitulé de colonne étant
   repris devant la valeur (attribut data-label posé par main.js). */
@media (max-width: 767.98px) {
	.entry-content .table.is-stacked,
	.entry-content .table.is-stacked tbody,
	.entry-content .table.is-stacked tr,
	.entry-content .table.is-stacked td {
		display: block;
		width: 100%;
	}
	.entry-content .table.is-stacked thead {
		display: none;
	}
	.entry-content .table.is-stacked tr {
		margin-bottom: .85rem;
		background: #fff;
		border: 1px solid var(--deolys-border);
		border-radius: var(--deolys-radius-sm);
		overflow: hidden;
	}
	.entry-content .table.is-stacked td {
		padding: .7rem .9rem;
		border: 0;
		border-bottom: 1px solid var(--deolys-border);
	}
	.entry-content .table.is-stacked tr td:last-child {
		border-bottom: 0;
	}
	.entry-content .table.is-stacked td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .1rem;
		font-size: .7rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--deolys-muted);
	}
}

/* =========================================================
   Blog — bannière, filtres et grille de cartes
   ========================================================= */
.blog-hero {
	background: var(--deolys-band-gradient);
	color: #fff;
}
.blog-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 120% at 80% -10%, rgba(var(--deolys-indigo-rgb),.45) 0%, transparent 60%);
	pointer-events: none;
}
.blog-hero-title {
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
	letter-spacing: -0.02em;
}
.blog-hero-lead {
	color: rgba(255,255,255,.86);
	font-size: 1.1rem;
	max-width: 60ch;
}
.blog-hero-crumb .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); margin: 0; }
.blog-hero-crumb .breadcrumb a { color: rgba(255,255,255,.85); }
.blog-hero-crumb .breadcrumb .active { color: #fff; }

/* Filtres (pastilles) */
.blog-filter { margin-bottom: 2.5rem; }
.blog-filter-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0;
	padding: 0;
}
.blog-filter-pill {
	display: inline-block;
	padding: .5rem 1.15rem;
	border-radius: 999px;
	background: var(--deolys-bg);
	border: 1px solid var(--deolys-border);
	color: var(--deolys-menu-link);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: all .18s ease;
}
.blog-filter-pill:hover {
	border-color: var(--deolys-primary);
	color: var(--deolys-primary-dark);
	background: var(--deolys-primary-light);
}
.blog-filter-pill.is-active {
	background: var(--deolys-primary);
	border-color: var(--deolys-primary);
	color: #fff;
}

/* Grille de cartes */
.blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	overflow: hidden;
	box-shadow: var(--deolys-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--deolys-shadow);
	border-color: var(--deolys-primary-light);
}
.blog-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--deolys-bg);
}
.blog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 2.5rem;
	color: var(--deolys-primary);
	opacity: .5;
}
.blog-card-body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.25rem 1.35rem 1.4rem;
	flex: 1 1 auto;
}
.blog-card-cat {
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--deolys-primary-dark);
	background: var(--deolys-primary-light);
	padding: .3rem .7rem;
	border-radius: 999px;
	text-decoration: none;
}
.blog-card-cat:hover { background: var(--deolys-primary); color: #fff; }
.blog-card-title {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.blog-card-title a {
	color: var(--deolys-navy);
	text-decoration: none;
}
.blog-card-title a:hover { color: var(--deolys-primary-dark); }
.blog-card-excerpt {
	color: var(--deolys-muted);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0;
}
.blog-card-meta {
	margin-top: auto;
	padding-top: .4rem;
	color: var(--deolys-muted);
	font-size: .82rem;
}

/* =========================================================
   Liens vers les sites dédiés des logiciels (groupe Deolys)
   ========================================================= */
.deolys-site-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--deolys-border);
	border-left: 4px solid var(--deolys-primary);
	border-radius: var(--deolys-radius);
	background: linear-gradient(135deg, var(--deolys-primary-light) 0%, #ffffff 70%);
}
.deolys-site-cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--deolys-primary-dark);
}
.deolys-site-cta-title {
	font-size: 1.35rem;
	margin: .5rem 0 .35rem;
	color: var(--deolys-navy);
}
.page-entry .entry-content .deolys-site-cta-title,
.deolys-site-cta-title {
	border-left: none;
	padding-left: 0;
}
.deolys-site-cta-lead {
	margin: 0;
	color: var(--deolys-muted);
	max-width: 62ch;
}
.deolys-site-cta-btn {
	flex: 0 0 auto;
}
@media (max-width: 575.98px) {
	.deolys-site-cta { padding: 1.25rem 1.25rem; }
	.deolys-site-cta-btn { width: 100%; text-align: center; }
}

/* Pied de page : bandeau des sites dédiés */
.footer-sites {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	margin-bottom: 1rem;
}
.footer-sites-label {
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.footer-sites-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
	padding: 0;
}
.footer-sites-list a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #fff;
	font-size: .9rem;
	text-decoration: none;
}
.footer-sites-list a:hover {
	color: #fff;
	text-decoration: underline;
}
.footer-sites-list i {
	color: #fff;
}

/* =========================================================
   Hero page d'accueil — mise en page 2 colonnes
   ========================================================= */
.hero-v2-title,
.hero-v2-subtitle { text-align: left; }

/* Badges de réassurance (icône + libellé sur 2 lignes) */
.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0 0 2rem;
	padding: 0;
}
.hero-badges li {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}
.hero-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 12px;
	font-size: 1.05rem;
}
.hero-badge-icon--green,
.hero-badge-icon--blue,
.hero-badge-icon--violet {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
}

/* Zone visuelle : écran + mobile + cartes flottantes */
.hero-visual {
	position: relative;
	padding: 1rem 0 2.5rem;
}
.hero-visual .hero-frame { margin: 0; }

.hero-phone-wrap {
	position: absolute;
	right: -24px;
	bottom: -58px;
	width: 196px;
	z-index: 5;
}
.hero-phone-wrap .gtlys-phone {
	width: 196px;
	border-radius: 34px;
	padding: 7px;
}
/* Application affichée à l'écran : on reprend le mockup .gtlys-app du thème,
   légèrement compacté pour ce format réduit. */
.hero-phone-app {
	padding: .55rem .5rem .7rem;
	gap: .4rem;
}
.hero-phone-app .gtlys-app-status { font-size: .5rem; }
.hero-phone-app .gtlys-app-titlebar { font-size: .68rem; }
.hero-phone-app .gtlys-app-title { font-size: .72rem; }
.hero-phone-app .gtlys-app-tabs { font-size: .55rem; }
.hero-phone-app .gtlys-app-tabs span { padding: .2rem .45rem; }
.hero-phone-app .gtlys-app-card { padding: .45rem .5rem; margin-bottom: .35rem; }
.hero-phone-app .gtlys-app-card-head { font-size: .62rem; }
.hero-phone-app .gtlys-app-route { font-size: .58rem; }
.hero-phone-app .gtlys-app-card-foot { font-size: .52rem; }
.hero-phone-app .gtlys-app-pill { font-size: .48rem; padding: .12rem .35rem; }

.hero-phone-kpi {
	background: var(--deolys-pastel-cyan);
	border-radius: 10px;
	padding: .45rem .55rem;
	line-height: 1.1;
	margin-bottom: .45rem;
}
.hero-phone-kpi strong { display: block; font-size: 1.05rem; color: var(--deolys-navy); }
.hero-phone-kpi small  { font-size: .52rem; color: var(--deolys-muted); }

/* Cartes flottantes repositionnées pour la colonne de droite */
/* Les anciennes règles .hero-chip-1/-2 fixaient d'autres ancrages ; on remet
   explicitement les côtés opposés à « auto », sinon un élément absolu ayant à
   la fois top et bottom s'étire sur toute la hauteur. */
.hero-visual .hero-chip {
	position: absolute;
	z-index: 4;
	max-width: 300px;
	top: auto; right: auto; bottom: auto; left: auto;
}
.hero-visual .hero-chip-1 { top: -10px; left: -52px; animation: deolys-float 6s ease-in-out infinite; }
/* Décalée vers l'intérieur : l'onglet fixe « Demander une démo » occupe le bord droit. */
.hero-visual .hero-chip-2 { top: 0;     right: 6px; animation: deolys-float 7s ease-in-out 1s infinite; }
.hero-visual .hero-chip-3 { bottom: 4%; left: -52px; animation: deolys-float 8s ease-in-out .5s infinite; }
.hero-visual .hero-chip-2 i { background: var(--deolys-pastel-violet); color: var(--deolys-violet); }
.hero-visual .hero-chip-3 i { background: var(--deolys-pastel-green);  color: var(--deolys-green); }

/* Bandeau de chiffres en carte blanche */
.stats-card {
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow);
	padding: 2rem 1.5rem;
}

@media (max-width: 991.98px) {
	.hero-v2-title,
	.hero-v2-subtitle { text-align: center; }
	.hero-v2-subtitle { margin-inline: auto; }
	.hero-badges { justify-content: center; gap: 1.25rem; }
	.hero-v2 .col-lg-6 > .d-flex.flex-wrap { justify-content: center; }
	.hero-visual { padding-bottom: 1rem; }
	/* Les cartes flottantes sortiraient du cadre : on les replie sous le visuel.
	   Le thème les masque sous 992px (.hero-chip{display:none}) ; on les
	   réaffiche ici car elles portent les arguments clés de la page. */
	.hero-visual .hero-chip {
		display: flex;
		position: static;
		max-width: none;
		margin-top: .75rem;
		animation: none;
	}
}

/* Boutons du hero : côte à côte dès le passage en 2 colonnes.
   Les libellés étant longs, on compacte le rembourrage plutôt que de les
   raccourcir, et on interdit le retour à la ligne du texte. */
@media (min-width: 992px) {
	.hero-cta {
		gap: .75rem !important;
	}
	.hero-cta .btn {
		white-space: nowrap;
		/* Jamais compressé sous la largeur du libellé, sinon le texte est coupé. */
		flex: 0 0 auto;
		padding: .72rem 1.15rem;
		font-size: .95rem;
	}
	.hero-cta .btn i {
		margin-left: .35rem !important;
		font-size: .9em;
	}
}
/* Côte à côte garanti dès que la colonne est assez large pour les deux libellés. */
@media (min-width: 1200px) {
	.hero-cta {
		flex-wrap: nowrap !important;
	}
}
@media (min-width: 1400px) {
	.hero-cta .btn {
		padding: .85rem 1.5rem;
		font-size: 1rem;
	}
}

/* Variantes de couleur supplémentaires pour les cartes fonctionnalités. */
.gtlys-feature-icon.bg-icon-blue,
.deolys-feature-icon.bg-icon-blue { background: var(--deolys-pastel-cyan); color: var(--deolys-primary); }
.gtlys-feature-icon.bg-icon-violet,
.deolys-feature-icon.bg-icon-violet { background: var(--deolys-pastel-violet); color: var(--deolys-violet); }

/* Dans le contenu éditorial, le thème décore les h3 d'une pastille et les passe
   en flex : à neutraliser à l'intérieur d'une carte, sinon le titre est décalé. */
.page-entry .entry-content .deolys-feature h3,
.single-entry .entry-content .deolys-feature h3 {
	display: block;
	color: var(--deolys-navy);
	margin-top: 0;
}
.page-entry .entry-content .deolys-feature h3::before,
.single-entry .entry-content .deolys-feature h3::before {
	content: none;
}
/* La grille de cartes ne doit pas hériter des puces vertes des listes. */
.page-entry .entry-content .deolys-cards {
	margin-bottom: 1.5rem;
}

/* =========================================================
   Dégagements pour la barre d'action mobile (fin de feuille :
   ces règles doivent l'emporter sur les positions de base)
   ========================================================= */
@media (max-width: 991.98px) {
	/* Le contenu ne doit pas rester caché derrière la barre. */
	body {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
	}
	/* Les éléments flottants remontent au-dessus de la barre. */
	#deolys-back-to-top {
		bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}
	.rgpd-manage-consent,
	.rgpd-consent-banner {
		bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* La pastille du bandeau cookies utilise un z-index très élevé (plugin) :
   on la masque pendant l'ouverture d'une modale pour qu'elle ne flotte pas
   par-dessus le formulaire. */
body.deolys-modal-open .rgpd-manage-consent {
	display: none;
}

/* =========================================================
   Page « Demander une démonstration »
   ========================================================= */
.demo-hero {
	background: var(--deolys-band-gradient);
	color: #fff;
	padding-bottom: 2rem;
}
.demo-hero .breadcrumb-item,
.demo-hero .breadcrumb-item a,
.demo-hero .breadcrumb-item.active {
	color: rgba(255, 255, 255, .85);
}
.demo-hero-title {
	color: #fff;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.demo-hero-lead {
	color: rgba(255, 255, 255, .85);
	font-size: 1.1rem;
	line-height: 1.7;
	max-width: 40rem;
}
.demo-hero-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem 1.75rem;
	margin: 0;
	padding: 0;
}
.demo-hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}
.demo-hero-badges i {
	color: var(--deolys-blob-3);
}

/* ----- Colonne « comment ça se passe » ----- */
.demo-side-title {
	font-size: 1.4rem;
	margin-bottom: 1.75rem;
}
.demo-steps {
	margin: 0 0 2rem;
	padding: 0;
	counter-reset: none;
}
.demo-steps li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.demo-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--deolys-primary-light);
	color: var(--deolys-primary-dark);
	font-weight: 700;
	font-size: 1.05rem;
}
.demo-steps h3 {
	font-size: 1.05rem;
	margin: .3rem 0 .35rem;
}
.demo-steps p {
	margin: 0;
	color: var(--deolys-muted);
	font-size: .95rem;
	line-height: 1.65;
}

.demo-callout {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--deolys-primary-light);
	border-radius: var(--deolys-radius);
}
.demo-callout-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--deolys-primary);
	color: #fff;
	font-size: 1.15rem;
}
.demo-callout-label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--deolys-navy);
}
.demo-callout-phone {
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--deolys-primary-dark);
	text-decoration: none;
}
.demo-callout-phone:hover {
	text-decoration: underline;
}
.demo-callout-hours {
	font-size: .82rem;
	color: var(--deolys-muted);
}

/* ----- Liste déroulante du formulaire ----- */
.contact-form-card select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	cursor: pointer;
}

/* ----- Cartes de choix des logiciels ----- */
.demo-soft-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--deolys-border);
	border-radius: var(--deolys-radius);
	box-shadow: var(--deolys-shadow-sm);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.demo-soft-card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 24px 48px rgba(10, 30, 64, .16);
}
.demo-soft-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--deolys-primary) 0%, var(--deolys-blob-2) 100%);
	color: #fff;
	font-size: 1.3rem;
}
.demo-soft-card h3 {
	font-size: 1.15rem;
	margin-bottom: .4rem;
}
.demo-soft-card p {
	flex-grow: 1;
	font-size: .92rem;
	color: var(--deolys-muted);
	margin-bottom: 1rem;
}
.demo-soft-link {
	font-size: .9rem;
	font-weight: 700;
	color: var(--deolys-primary-dark);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.demo-soft-card:hover .demo-soft-link {
	gap: .6rem;
}

@media (min-width: 992px) {
	.demo-form-card {
		position: sticky;
		top: 6.5rem;
	}
}