/* ============================================================
   Osmoze 2026 — custom CSS layer
   ------------------------------------------------------------
   Loaded AFTER all Canvas stylesheets so it can override safely.
   Purpose: patch the layout issues introduced by the 2026 refonte
   (inline styles, new section patterns) without rewriting HTML.
   Keep additions here instead of inline HTML where possible.
   ============================================================ */

:root {
	--osmoze-teal: #00a79d;
	--osmoze-teal-soft: #f0faf9;
	--osmoze-blue: #5bc2e7;
	--osmoze-green: #c2d500;
	--osmoze-ink: #333;
	--osmoze-muted: #555;
	--osmoze-muted-light: #777;
	--osmoze-bg-alt: #f9f9f9;
	--osmoze-bg-cta: #f2f2f2;
	--osmoze-bg-proof: #f7f7f7;
}

/* ------------------------------------------------------------
   FIX 1 — Vertical rhythm for content sections
   ------------------------------------------------------------
   Canvas's `.content-wrap` has `position: relative` and nothing else.
   The vertical spacing normally comes from the parent `.section`
   (padding: 60px 0). In the 2026 refonte the .content-wrap blocks
   live directly under <section id="content"> without a .section
   wrapper, so they stack with zero rhythm.
------------------------------------------------------------ */
section#content > .content-wrap {
	padding: 60px 0;
}

/* Avoid doubling padding when a content-wrap is the first or last
   child (hero/footer blocks already manage their own spacing) */
section#content > .section.parallax + .content-wrap,
section#content > .page-sep-degr + .content-wrap {
	padding-top: 50px;
}

/* ------------------------------------------------------------
   FIX 2 — Define the missing `.fbox-left` variant
   ------------------------------------------------------------
   Canvas has `.fbox-center` and `.fbox-right` but not `.fbox-left`.
   The IA page and Heavenize page use `.fbox-left` for icon-on-the-left
   cards; without this rule the icon sits at (top: 0, left: 0) and
   overlaps the content.
------------------------------------------------------------ */
.feature-box.fbox-left {
	padding-left: 95px;
	padding-right: 0;
	text-align: left;
}
.feature-box.fbox-left .fbox-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
}
.feature-box.fbox-left .fbox-icon img {
	max-width: 100%;
	height: auto;
}
.feature-box.fbox-left h3 {
	margin-top: 0;
}

/* Responsive: on mobile, move the icon above the content */
@media (max-width: 767px) {
	.feature-box.fbox-left {
		padding-left: 0;
		text-align: center;
	}
	.feature-box.fbox-left .fbox-icon {
		position: relative;
		margin: 0 auto 15px;
	}
}

/* ------------------------------------------------------------
   FIX 3 — Neutralize the `col_two_third col_last` centering hack
   ------------------------------------------------------------
   Several pages use <div class="col_two_third col_last"
   style="margin-left: 16.66%;"> to center a 2/3-width narrative block.
   The inline margin-left breaks on mobile (element pushed right).
   We override with block-level auto-centering that collapses cleanly
   on small screens.
------------------------------------------------------------ */
.col_two_third.col_last[style*="margin-left"] {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	clear: both;
}

/* ------------------------------------------------------------
   FIX 4 — Images stay inside their column
------------------------------------------------------------ */
section#content img {
	max-width: 100%;
	height: auto;
}
/* Centered content images (e.g. schema-osmoze.png) */
.container.clearfix.center > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------
   FIX 5 — Comparative table polish
   ------------------------------------------------------------
   - Mute the default #dddddd row borders
   - Ensure cell text wraps properly inside the Osmoze column
   - Force the thead background across browsers (some renderers
     drop inline styles on <thead>)
------------------------------------------------------------ */
.table-responsive .table {
	border-collapse: collapse;
}
.table-responsive .table > thead > tr > th {
	background-color: var(--osmoze-ink);
	color: #fff;
	border-color: var(--osmoze-ink);
	vertical-align: middle;
}
.table-responsive .table > tbody > tr > td {
	border-top-color: #eee;
	vertical-align: middle;
}
.table-responsive .table .osmoze-col,
.table-responsive .table td[style*="f0faf9"] {
	background-color: var(--osmoze-teal-soft) !important;
}
.table-responsive .table th.osmoze-col,
.table-responsive .table th[style*="00a79d"] {
	background-color: var(--osmoze-teal) !important;
}

/* ------------------------------------------------------------
   FIX 6 — Promo (dark band with metrics) — vertical rhythm
   ------------------------------------------------------------
   The `.promo.promo-flat.promo-full.nestpas` block wraps its
   children in `.bgnot`, which has `padding: 40px 0;`. When we
   put 4 big metrics inside, the layout feels cramped vertically.
------------------------------------------------------------ */
.promo.nestpas .bgnot {
	padding: 60px 0;
}
.promo.nestpas .bgnot .col_one_fourth {
	margin-top: 10px;
	margin-bottom: 10px;
}
.promo.nestpas .bgnot h1 {
	line-height: 1;
}

/* ------------------------------------------------------------
   FIX 7 — Hero parallax text breathing room
------------------------------------------------------------ */
.section.parallax.dark .emphasis-title {
	padding: 40px 20px;
}
.section.parallax.dark .emphasis-title h2 {
	margin-bottom: 15px;
}

/* ------------------------------------------------------------
   FIX 8 — Heading block consistent spacing
------------------------------------------------------------ */
.heading-block + .container {
	margin-top: 10px;
}

/* ------------------------------------------------------------
   FIX 9 — Feature-box placeholder (dashed, used on IA page)
------------------------------------------------------------ */
.feature-box-placeholder,
.feature-box[style*="dashed"] {
	border: 2px dashed #ccc !important;
	padding: 25px !important;
	background: #fafafa !important;
}
.feature-box-placeholder h3,
.feature-box[style*="dashed"] h3 {
	color: var(--osmoze-muted) !important;
}

/* ------------------------------------------------------------
   FIX 10 — Prevent col_* float leaks into section below
   ------------------------------------------------------------
   Canvas relies on `.col_last { clear: right; }` + section overflow
   to break float sequences. When we stack multiple col grids inside
   the same .container, the clear can fail. A parent clearfix is the
   safest net.
------------------------------------------------------------ */
.content-wrap > .container:after,
.content-wrap > .container.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/* ------------------------------------------------------------
   FIX 11 — Timeline year labels (Heavenize page)
   ------------------------------------------------------------
   Used as `<h1 style="font-size: 2.8em; color: #00a79d; ...">2008</h1>`.
   This rule makes the teal year labels consistent without relying on
   inline styles (and easier to tweak later).
------------------------------------------------------------ */
.timeline-year,
h1.timeline-year {
	font-size: 2.8em;
	color: var(--osmoze-teal);
	margin-bottom: 5px;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------
   FIX 12 — Hero parallax section: ensure dark background fallback
   ------------------------------------------------------------
   If the parallax image fails to load (e.g. on slow networks),
   the dark class background must remain visible so the light text
   on top stays readable.
------------------------------------------------------------ */
.section.parallax.dark {
	background-color: #222 !important;
}

/* ------------------------------------------------------------
   FIX 13 — Social proof row: keep logos vertically centered
------------------------------------------------------------ */
.content-wrap .container .col_one_fourth img[alt="Caceis"],
.content-wrap .container .col_half img[alt="Caceis"] {
	vertical-align: middle;
	display: inline-block;
}

/* ------------------------------------------------------------
   UTILITIES — use in new HTML instead of inline styles
------------------------------------------------------------ */
.text-teal { color: var(--osmoze-teal); }
.bg-teal { background-color: var(--osmoze-teal); color: #fff; }
.bg-teal-soft { background-color: var(--osmoze-teal-soft); }
.bg-alt { background-color: var(--osmoze-bg-alt); }
.bg-cta { background-color: var(--osmoze-bg-cta); }
.bg-proof { background-color: var(--osmoze-bg-proof); }
.muted { color: var(--osmoze-muted); }

/* ------------------------------------------------------------
   FIX 14 — Contact page: vertical alignment of the iframe map
   next to the form (avoid height mismatch)
------------------------------------------------------------ */
#template-contactform iframe,
.contact-widget iframe,
#content iframe[src*="maps.google"],
#content iframe[src*="maps/embed"] {
	display: block;
	width: 100%;
	border: 0;
}

/* ------------------------------------------------------------
   FIX 15 — Small visual tweak: feature box hover subtle shadow
   on the "... your next agent" placeholder card
------------------------------------------------------------ */
.feature-box[style*="dashed"]:hover {
	border-color: var(--osmoze-teal) !important;
	transition: border-color 0.2s ease;
}

/* ============================================================
   PART 2 — Iteration on issues reported after first review
   ============================================================ */

/* ------------------------------------------------------------
   FIX 16 — Body background forced white, so the Canvas theme
   cannot bleed a tinted base color through content sections.
------------------------------------------------------------ */
body {
	background: #fff;
}

/* ------------------------------------------------------------
   FIX 17 — (révisé 2026-05-08) — Sticky header opérationnel,
   sans rétrécissement, sans flash visuel, sans dépassement logo.
   ------------------------------------------------------------
   Approche : on laisse Canvas activer le sticky (position: fixed
   au scroll), mais on force une hauteur constante du header en
   sticky vs non-sticky pour qu'il n'y ait aucune transition de
   hauteur — donc plus de flash blanc en transition, plus de
   logo qui dépasse. Voir aussi FIX 34 ci-dessous.
   ------------------------------------------------------------
   Note : Canvas réserve l'espace nécessaire automatiquement
   via le placeholder #header-wrap.placeholder. On ne force
   donc plus position: relative.
------------------------------------------------------------ */
/* (Ancien override "position: relative !important" retiré le 2026-05-08
   pour réactiver le sticky proprement, validé par José) */

/* ------------------------------------------------------------
   FIX 18 — Uniform header height across all pages.
   ------------------------------------------------------------
   Target row height: 76px (48px logo + 14px top/bottom padding).
   Every header child (logo, primary-menu, top-search, flag) uses
   line-height: 76px so they all sit on a single perfectly aligned
   baseline. Desktop only — mobile breakpoint (<992px) keeps Canvas's
   burger-menu behavior intact.
------------------------------------------------------------ */
#logo {
	padding: 14px 0 !important;
	height: auto !important;
}
#logo a,
#logo .standard-logo,
#logo .retina-logo {
	height: auto !important;
	display: inline-block;
	line-height: 1;
}
#logo img {
	max-height: 48px !important;
	height: auto !important;
	width: auto !important;
	vertical-align: middle;
}

@media (min-width: 992px) {
	/* Force nav items to single row — prevents wrap when there are
	   many labels (e.g. IA page with 8 items) */
	#primary-menu > ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		float: right !important;
		white-space: nowrap !important;
		height: 76px !important;
	}
	#primary-menu > ul > li {
		float: none !important;
		display: inline-block;
		height: 76px;
	}
	#primary-menu > ul > li > a {
		line-height: 76px !important;
		height: 76px !important;
		padding: 0 12px !important;
		font-size: 13px !important;
	}
	#primary-menu > ul > li.current > a {
		color: var(--osmoze-teal) !important;
	}
	/* Language-flag link: align vertically */
	#primary-menu > ul > li > a > img {
		vertical-align: middle;
		margin-top: -2px;
	}

	/* Top-search (magnifying glass) aligned to the same 76px baseline */
	#top-search {
		float: right !important;
		height: 76px !important;
		line-height: 76px !important;
		margin: 0 !important;
	}
	#top-search-trigger {
		height: 76px !important;
		line-height: 76px !important;
		display: inline-block;
		vertical-align: middle;
	}
	#top-search-trigger > i {
		line-height: 76px;
		vertical-align: middle;
	}
}

/* ------------------------------------------------------------
   FIX 19 — Narrative block centering (replaces margin-left hack)
   ------------------------------------------------------------
   The `col_two_third col_last` + inline `margin-left: 16.66%`
   pattern is unreliable across screen sizes — on wide screens the
   text ended up left-shifted, giving the impression that the menu
   "was floating on the right".
   We replace the pattern with a dedicated class (see the Python
   migration script committed alongside this CSS).
------------------------------------------------------------ */
.narrative-centered {
	max-width: 780px;
	margin: 0 auto !important;
	float: none !important;
	display: block;
	padding: 0 15px;
	text-align: left;
	clear: both;
}
@media (max-width: 767px) {
	.narrative-centered {
		max-width: 100%;
		padding: 0;
	}
}

/* ------------------------------------------------------------
   FIX 20 — Feature-box text colors on light backgrounds.
   User reported white-on-light-gray unreadable text in the contact
   info boxes (Visitez-nous / Appelez-nous / Écrivez-nous).
   Force readable dark text inside any feature-box that sits in a
   `.content-wrap` (i.e. the main content, not the dark hero).
------------------------------------------------------------ */
.content-wrap .feature-box,
.content-wrap .feature-box h3,
.content-wrap .feature-box h4,
.content-wrap .feature-box h5,
.content-wrap .feature-box p,
.content-wrap .feature-box li {
	color: #333;
}
.content-wrap .feature-box .subtitle {
	color: #666;
	display: block;
	font-weight: normal;
	margin-top: 5px;
	font-size: 0.9em;
}

/* Icon circle on contact page is teal for consistency with brand */
#contact .feature-box .fbox-icon a {
	background: var(--osmoze-teal);
	color: #fff;
}
#contact .feature-box .fbox-icon a:hover {
	background: #007f78;
}

/* ------------------------------------------------------------
   FIX 21 — Page-title hero: readable text + clean H1 wrapping
   ------------------------------------------------------------
   - Force dark background so white text is always readable
   - H1 wrapping: sane line-height + centered
   - Subtitle bumped to #fff (was #ccc — user reported illisible)
   - Text-shadow for extra contrast against photo-type backgrounds
------------------------------------------------------------ */
#page-title.page-title-dark {
	background: #2b2b2b !important;
	padding: 50px 0 !important;
}
#page-title h1 {
	line-height: 1.25;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
#page-title.page-title-dark h1 {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
#page-title.page-title-dark h1 span {
	color: #fff !important;
}
#page-title .container > span,
#page-title.page-title-dark > .container > span {
	display: block;
	margin-top: 14px;
	color: #f5f5f5 !important;
	font-size: 1.05em;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------
   FIX 22 — Contact map: cap iframe height so it doesn't dwarf the form
------------------------------------------------------------ */
section#content iframe[src*="maps.google"],
section#content iframe[src*="maps/embed"] {
	height: 320px !important;
	max-height: 50vh;
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------
   FIX 23 — Contact-form inputs visible on light backgrounds
------------------------------------------------------------ */
.contact-widget .sm-form-control {
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
}
.contact-widget .contact-form-donnees {
	color: #555;
	font-size: 0.9em;
	margin: 12px 0;
}

/* ------------------------------------------------------------
   FIX 24 — Ensure heading-block text colors are dark in content
------------------------------------------------------------ */
.content-wrap .heading-block h3,
.content-wrap .heading-block h4 {
	color: #222;
}
.content-wrap .heading-block > span {
	color: #666;
}

/* ------------------------------------------------------------
   FIX 25 — Content readability: bump body/paragraph font size.
   ------------------------------------------------------------
   Canvas's default body font-size is ~14px which reads small on
   modern high-density screens. User reported some paragraphs (cas
   clients "Contexte" narrative, right-column problems list) as
   borderline illegible. Bump the base across the board.
------------------------------------------------------------ */
body {
	font-size: 15px;
	line-height: 1.7;
}
section#content p,
section#content ul,
section#content ol,
section#content li {
	font-size: 15px;
	line-height: 1.7;
}
.narrative-centered p {
	font-size: 1.05em;
	line-height: 1.75;
}
.narrative-centered + .narrative-centered p,
.content-wrap .col_half p,
.content-wrap .col_half li {
	font-size: 15px;
	line-height: 1.65;
}
.feature-box p {
	font-size: 14.5px;
	line-height: 1.6;
}
section#content h3.accroche {
	font-size: 2.2em;
	line-height: 1.2;
}
section#content h3:not(.accroche) {
	font-size: 1.3em;
}

/* ------------------------------------------------------------
   FIX 26 — Bigger visual width for narrative-centered
   (user reported content tronqué on large screens on IA page).
   Widen the max so wide-screen users don't feel the column is
   squished to the left.
------------------------------------------------------------ */
.narrative-centered {
	width: 100%;
	max-width: 860px;
	box-sizing: border-box;
}

/* ------------------------------------------------------------
   FIX 27 — Ensure container children don't overflow viewport
   horizontally on narrow windows
------------------------------------------------------------ */
.container {
	box-sizing: border-box;
}

/* ============================================================
   PART 3 — Hardening avant Phase 3 (passage HTML 2026-05-08)
   ============================================================ */

/* ------------------------------------------------------------
   FIX 28 — Sticky-header alignment on all viewports
   ------------------------------------------------------------
   FIX 18 normalised the header height (76px line) on screens
   ≥992px only. On tablet portrait and below, Canvas's style.css
   still applies `margin-top: 20px !important` to #top-search
   when `.sticky-header` is added on scroll, but NOT to
   #primary-menu — the magnifying glass icon ends up misaligned
   with the nav row. Symptom reported by the user:
   "la loupe de recherche se désaligne du sous-menu en scroll".
   This rule extends FIX 18's neutralisation to all viewports:
   when sticky is engaged, both #top-search and #primary-menu
   share the same baseline (margin: 0).
------------------------------------------------------------ */
#header.sticky-header #top-search,
#header.sticky-header:not(.static-sticky) #top-search,
#header.sticky-header #primary-menu,
#header.sticky-header:not(.static-sticky) #primary-menu,
#header.sticky-header #top-cart,
#header.sticky-header:not(.static-sticky) #top-cart,
#header.sticky-header #side-panel-trigger,
#header.sticky-header:not(.static-sticky) #side-panel-trigger {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* And on mobile (Canvas burger-menu mode), keep #top-search and
   the nav trigger on the same row regardless of sticky state. */
@media (max-width: 991px) {
	#header.sticky-header #header-wrap > .container,
	#header #header-wrap > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#header #top-search,
	#header.sticky-header #top-search {
		float: none !important;
		display: inline-flex;
		align-items: center;
		height: auto !important;
	}
}

/* ------------------------------------------------------------
   FIX 29 — `.container` safety net: force horizontal centering
   even if a sibling float/clear sequence misbehaves.
   ------------------------------------------------------------
   Bootstrap 3's `.container` already centres via `margin: 0 auto`,
   but in some Canvas patterns a parent with `float: left` (residual
   col_* class) sneaks in and shifts the container to the left edge.
   Symptom reported by the user: "tout se colle à gauche, de temps
   en temps". This rule is a belt-and-suspenders safety net.
------------------------------------------------------------ */
section#content > .container,
section#content > .content-wrap > .container,
section#content > .content-wrap > .container.clearfix {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* ------------------------------------------------------------
   FIX 30 — Migration trail for the legacy `col_two_third` +
   inline `margin-left` pattern.
   ------------------------------------------------------------
   FIX 3 already neutralises the inline margin-left, FIX 19 +
   FIX 26 introduce `.narrative-centered` as the modern
   replacement. This rule is a final guard: any `col_two_third`
   that survives without the modern class still gets max-width
   centering (no left-stuck content).
------------------------------------------------------------ */
.col_two_third:not(.narrative-centered) {
	max-width: 860px;
}
.col_two_third.col_last:not(.narrative-centered) {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* ============================================================
   PART 4 — Quick wins de style (modernisation 2024 du look 2018)
   ------------------------------------------------------------
   Validés par José le 2026-05-08. Objectif : faire passer le
   rendu de "Bootstrap 3 / Canvas 2018" à "moderne / aéré 2024"
   sans toucher au CSS Canvas de base. Tout est réversible
   (suppression du bloc PART 4).
   ============================================================ */

/* ------------------------------------------------------------
   FIX 31 — Boutons CTA modernisés
   ------------------------------------------------------------
   - border-radius plus généreux (4px → 10px ; rounded → 30px)
   - shadow douce qui flotte
   - hover : élévation subtile + shadow renforcée
   - transition lissée
   - padding horizontal plus aéré
------------------------------------------------------------ */
.button {
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	letter-spacing: 0.01em;
	font-weight: 600;
	padding-left: 22px;
	padding-right: 22px;
}
.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.button:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.button.button-rounded {
	border-radius: 30px !important;
}
.button.button-large {
	padding-left: 28px;
	padding-right: 28px;
}
/* Border buttons (used in dark hero) — keep their transparent fill but
   add the shadow + radius for consistency. */
.button.button-border {
	box-shadow: none;
}
.button.button-border:hover {
	box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
   FIX 32 — Feature-boxes / cards modernisées
   ------------------------------------------------------------
   - box-shadow douce (style "card moderne")
   - border-radius 12px
   - padding intérieur plus généreux
   - hover : légère élévation
   Scope : content-wrap (pas hero, pas footer)
   Préserve les variants fbox-plain (qui doivent rester sans cadre).
------------------------------------------------------------ */
.content-wrap .feature-box:not(.fbox-plain):not(.fbox-border) {
	background: #fff;
	border-radius: 12px;
	padding: 28px 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-wrap .feature-box:not(.fbox-plain):not(.fbox-border):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
/* fbox-plain explicitly opt out of the card look (used for the home
   triptyque where each pilier sits on the page background) */
.content-wrap .feature-box.fbox-plain {
	background: transparent;
	box-shadow: none;
}

/* Tables (comparison table on Osmoze) get the same rounded card feel */
.content-wrap .table-responsive {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Heading-block subtle accent line (replaces the harsh default
   underline that some headings inherit from Canvas) */
.content-wrap .heading-block:not(.center)::after {
	background-color: var(--osmoze-teal);
	height: 3px;
	border-radius: 3px;
	width: 48px;
}

/* ------------------------------------------------------------
   FIX 33 — Typographie modernisée
   ------------------------------------------------------------
   - Font-system stack moderne (perf + look natif sur tous OS)
   - Letter-spacing négatif sur les gros titres (style "Apple")
   - Hiérarchie h1/h2/h3 ajustée pour plus de respiration
   - font-feature-settings pour les ligatures et chiffres tabulaires
------------------------------------------------------------ */
body,
section#content {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Big headings — tighter letter-spacing and line-height for impact */
h1,
section#content h1,
section#content h2,
.emphasis-title h2,
section#content h3.accroche {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	letter-spacing: -0.015em;
	line-height: 1.2;
	font-weight: 700;
}

/* Sub-headings — slight letter-spacing for distinction */
section#content h3:not(.accroche),
section#content h4 {
	letter-spacing: -0.005em;
	font-weight: 600;
	line-height: 1.3;
}

/* Chiffres alignés sur tous les sous-titres restés en Raleway (police
   de titre Canvas) : par défaut Raleway emploie des chiffres elzéviriens
   où 3 4 5 7 9 descendent sous la ligne de base. On force les chiffres
   alignés (lining) sur h3 non-accroche, h4, h5, h6 — ex. h4 "Opérationnel
   dès 5 semaines", h5 "(articles 13-14)", h4 contact "5 Villa Juge".
   Les h1/h2/h3.accroche utilisent la police système, non concernés.
   Pas de restriction section#content pour couvrir tous les emplacements. */
h3:not(.accroche),
h4,
h5,
h6 {
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1, "kern" 1;
}

/* Lead paragraphs (right under big headings) get a slightly larger
   size to mark them as introductions */
section#content .heading-block + p,
section#content h3.accroche + p,
.emphasis-title h2 + p {
	font-size: 1.05em;
	line-height: 1.65;
	color: var(--osmoze-muted);
}

/* Buttons inherit the system font stack too */
.button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* Tabular numbers in numeric metrics (chiffres-clés sur la home) */
.promo.nestpas .bgnot h1,
.promo.nestpas .bgnot h2 {
	font-feature-settings: "tnum" 1, "kern" 1;
	letter-spacing: -0.02em;
}

/* ============================================================
   PART 5 — Sticky header propre (2026-05-08)
   ============================================================ */

/* ------------------------------------------------------------
   FIX 34 — Sticky header sans rétrécissement ni flash
   ------------------------------------------------------------
   Symptômes signalés :
   - "Flash blanc" en transition quand le bandeau rétrécit au scroll
   - Le logo Osmoze dépasse du bandeau header rétréci
   ------------------------------------------------------------
   Cause racine : Canvas réduit la hauteur du header en mode sticky
   (transitions sur height/padding du logo et de la nav). Pendant
   la transition, le header est plus court que sa version originale,
   et plusieurs choses se cassent : logo qui dépasse, bandeau qui
   "saute" en hauteur, et un flash visuel pendant l'interpolation.
   ------------------------------------------------------------
   Fix : forcer une hauteur uniforme et constante (76px desktop,
   60px mobile) en sticky comme en non-sticky. Aucune transition
   de hauteur, aucune réduction du logo. Le header fait toujours
   76px, qu'il soit en haut de page ou stické.
------------------------------------------------------------ */

/* Désactiver TOUTES les transitions liées à la hauteur sur le header */
#header,
#header *,
#header.sticky-header,
#header.sticky-header * {
	transition-property: color, background-color, border-color, opacity, box-shadow !important;
	transition-duration: 0.2s !important;
}

/* Background opaque blanc en sticky pour éviter tout fade visuel */
#header.sticky-header,
#header.sticky-header #header-wrap {
	background-color: #fff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Hauteur constante 76px desktop — sticky comme non-sticky */
@media (min-width: 992px) {
	#header,
	#header.sticky-header,
	#header #header-wrap,
	#header.sticky-header #header-wrap {
		height: 76px !important;
		min-height: 76px !important;
	}

	/* Logo : taille constante, jamais réduit en sticky.
	   On centre verticalement l'image en ajustant le padding du
	   wrapper #logo uniquement (sans toucher au display des enfants
	   .standard-logo / .retina-logo, sinon on casse la logique
	   Canvas qui cache la version retina via display: none). */
	#header #logo,
	#header.sticky-header #logo {
		height: 76px !important;
		padding: 14px 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		display: block;
		float: left;
	}
	#header #logo a.standard-logo,
	#header.sticky-header #logo a.standard-logo {
		padding: 0 !important;
		height: auto !important;
		line-height: 1 !important;
		display: block;
	}
	#header #logo a.retina-logo,
	#header.sticky-header #logo a.retina-logo {
		display: none;
	}
	#header #logo img,
	#header.sticky-header #logo img {
		max-height: 48px !important;
		height: auto !important;
		width: auto !important;
		display: block;
		margin: 0 !important;
	}

	/* Nav et top-search : hauteur 76px en sticky comme en non-sticky */
	#header.sticky-header #primary-menu > ul {
		height: 76px !important;
	}
	#header.sticky-header #primary-menu > ul > li > a {
		line-height: 76px !important;
		height: 76px !important;
		padding: 0 12px !important;
	}
	#header.sticky-header #top-search {
		height: 76px !important;
		line-height: 76px !important;
		margin: 0 !important;
	}
	#header.sticky-header #top-search-trigger,
	#header.sticky-header #top-search-trigger > i {
		height: 76px !important;
		line-height: 76px !important;
	}
}

/* Mobile : hauteur 60px constante */
@media (max-width: 991px) {
	#header,
	#header.sticky-header,
	#header #header-wrap,
	#header.sticky-header #header-wrap {
		min-height: 60px !important;
	}
	#header.sticky-header #logo img {
		max-height: 36px !important;
	}
}

/* Z-index élevé en sticky pour rester au-dessus du contenu */
#header.sticky-header {
	z-index: 199 !important;
}

/* ============================================================
   PART 6 — Triptyque homogène (2026-05-08)
   ============================================================ */

/* ------------------------------------------------------------
   FIX 35 — Triptyque Data / Calculs / Langage : hauteur uniforme,
   structure parallèle, alignement chirurgical des éléments.
   ------------------------------------------------------------
   Sans ce fix, les 3 piliers ont des hauteurs différentes (à
   cause du contenu de longueur variable), les check-marks ne
   s'alignent pas entre colonnes, et le visuel est "lourd et
   mal organisé" (retour utilisateur 2026-05-08).
   ------------------------------------------------------------
   On utilise flexbox sur la triptyque-row, plus 5 zones internes
   (icon / friction / heading / tagline / body / check / closing)
   chacune avec une hauteur min ou un flex-grow contrôlé.
------------------------------------------------------------ */
@media (min-width: 768px) {
	.triptyque-row {
		display: flex !important;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0;
	}
	.triptyque-row > .col_one_third {
		display: flex;
		flex-direction: column;
		float: none !important;
		margin-bottom: 0;
	}
	.triptyque-row > .col_one_third > .pilier-card {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		padding: 32px 28px;
	}
}

/* Card moderne sur les piliers — override fbox-plain opt-out du FIX 32.
   Validé user 2026-05-08 : radius 14px, shadow flottante, hover élévation.
   2026-05-29 : fond très légèrement teinté teal (#f4fbfa) au lieu du
   blanc pur, pour réchauffer la home (retour user "trop blanc/terne").
   Hairline bordure teal pour détacher la card du fond de section. */
.content-wrap .feature-box.pilier-card,
.feature-box.pilier-card {
	background: #f4fbfa !important;
	border: 1px solid rgba(0, 167, 157, 0.12) !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.content-wrap .feature-box.pilier-card:hover,
.feature-box.pilier-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* Section #piliers en fond très léger pour faire ressortir les cards */
#piliers {
	background: var(--osmoze-bg-alt);
}

/* ============================================================
   PART 7 — Bloc "Une journée du gérant" (Osmoze, 2026-05-07)
   ============================================================ */

/* Mini-cards pour les 4 verbes Surveiller / Comprendre / Simuler /
   Décider sur la page Osmoze. Plus compactes que pilier-card,
   icône Font Awesome teal plus petite, sans shadow. */
.content-wrap .feature-box.journee-card {
	background: transparent;
	box-shadow: none;
	padding: 16px 12px;
	text-align: center;
	border-radius: 0;
}
.journee-card .fbox-icon.journee-fa-icon {
	flex: 0 0 84px !important;
	width: 84px !important;
	height: 84px !important;
	min-width: 84px !important;
	max-width: 84px !important;
	min-height: 84px !important;
	max-height: 84px !important;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--osmoze-teal-soft) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 18px auto !important;
	padding: 0 !important;
	position: static !important;
}
.journee-card .fbox-icon.journee-fa-icon > i {
	color: var(--osmoze-teal) !important;
	font-size: 2.2rem !important;
	line-height: 1 !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
}
.journee-card h4 {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 10px 0;
	color: var(--osmoze-ink);
	text-align: center;
}
.journee-card p {
	font-size: 0.92em;
	line-height: 1.55;
	color: #555;
	text-align: left;
}

/* ============================================================
   PART 8 — Cards triptyque pleine largeur (Osmoze, 2026-05-07)
   ============================================================ */

/* Variante "pilier-card-osmoze" : pleine largeur sur la page Osmoze
   (vs 3 colonnes sur la home). Pas de contraintes de hauteurs
   strictes (utile pour aligner entre cards mais inutile en pleine
   largeur). Plus de padding, plus d'air. */
.content-wrap .feature-box.pilier-card.pilier-card-osmoze {
	padding: 36px 32px !important;
	max-width: 100%;
}
.pilier-card-osmoze .pilier-friction {
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
	margin-bottom: 16px;
	font-size: 0.95em;
}
.pilier-card-osmoze h3 {
	height: auto !important;
	line-height: 1.2 !important;
	overflow: visible !important;
	font-size: 1.7em !important;
	margin: 0 0 14px 0 !important;
}
.pilier-card-osmoze .pilier-body {
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
	font-size: 1em;
	line-height: 1.65;
}
.pilier-card-osmoze h4 {
	font-weight: 700;
}
.pilier-card-osmoze .table-responsive {
	margin-top: 12px;
	box-shadow: none;
	border-radius: 8px;
}
.pilier-card-osmoze .table-responsive .table tbody tr td {
	font-size: 0.9em;
	border-top-color: #f0f0f0;
}

/* ============================================================
   PART 9 — Timeline Intentional Engine (Osmoze, 2026-05-07)
   ============================================================ */

/* Ruban horizontal des 7 jalons 2006/2008/2012/2019/2024/2025/2026.
   Sur desktop : 7 colonnes flex, ligne continue qui les relie.
   Sur mobile : pile verticale. */
.ie-timeline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	gap: 12px;
	padding: 30px 0 10px;
}

/* Ligne horizontale continue qui passe au milieu des pastilles year */
@media (min-width: 992px) {
	.ie-timeline::before {
		content: "";
		position: absolute;
		top: 50px;
		left: 5%;
		right: 5%;
		height: 2px;
		background: linear-gradient(90deg, var(--osmoze-teal-soft) 0%, var(--osmoze-teal) 50%, var(--osmoze-teal-soft) 100%);
		z-index: 0;
	}
}

.ie-timeline-item {
	flex: 1 1 110px;
	min-width: 110px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.ie-year {
	display: inline-block;
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--osmoze-teal);
	color: var(--osmoze-teal);
	font-weight: 700;
	font-size: 1.05em;
	margin: 0 auto 12px auto;
	box-shadow: 0 2px 8px rgba(0, 167, 157, 0.15);
	letter-spacing: -0.02em;
	font-feature-settings: "tnum" 1;
}

/* Pivots = jalons critiques (2012 brevet+production, 2026 agentique) :
   pastille pleine teal au lieu d'outline */
.ie-pivot .ie-year {
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%);
	color: #fff;
	border-color: var(--osmoze-teal);
	box-shadow: 0 4px 12px rgba(0, 167, 157, 0.3);
}

.ie-jalon {
	font-size: 0.85em;
	line-height: 1.45;
	color: #444;
	padding: 0 4px;
}

/* Mobile : pile verticale, pas de ligne horizontale */
@media (max-width: 991px) {
	.ie-timeline {
		flex-direction: column;
		gap: 22px;
	}
	.ie-timeline-item {
		flex: 1 1 100%;
	}
}

/* ============================================================
   PART 10 — 4 caractéristiques Intentional Engine (Osmoze)
   ============================================================ */

.content-wrap .feature-box.ie-caract {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 24px 22px;
	margin-bottom: 22px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-wrap .feature-box.ie-caract:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.ie-caract h4 {
	margin: 0 0 10px 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--osmoze-ink);
}
.ie-caract p {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
	color: #444;
}

/* Grille 2x2 pour les 4 cards IE — hauteurs égales */
.ie-caract-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
/* Neutralise le pseudo-élément ::after du .clearfix qui occuperait sinon une cellule du grid */
.ie-caract-grid::before,
.ie-caract-grid::after {
	display: none !important;
	content: none !important;
}
.ie-caract-grid > .col_half {
	width: 100%;
	margin: 0;
	float: none;
}
.ie-caract-grid > .col_half > .ie-caract {
	height: 100%;
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.ie-caract-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   PART 11 — Accordéon RFI / DSI (page IA, 2026-05-07)
   ============================================================ */

.rfi-accordion {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}
.rfi-accordion[open] {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rfi-accordion summary {
	padding: 22px 28px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	user-select: none;
	transition: background-color 0.18s ease;
}
.rfi-accordion summary:hover {
	background: var(--osmoze-bg-alt);
}
/* Hide default disclosure marker */
.rfi-accordion summary::-webkit-details-marker { display: none; }
.rfi-accordion summary::marker { display: none; }

.rfi-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
}
.rfi-title {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--osmoze-ink);
	letter-spacing: -0.01em;
}
.rfi-subtitle {
	flex: 1 1 280px;
	color: #666;
	font-size: 0.92em;
	font-style: italic;
}
.rfi-chevron {
	color: var(--osmoze-teal);
	font-size: 1rem;
	margin-left: auto;
	transition: transform 0.25s ease;
}
.rfi-accordion[open] .rfi-chevron {
	transform: rotate(180deg);
}

.rfi-content {
	padding: 10px 32px 32px 32px;
	border-top: 1px solid #f0f0f0;
}
.rfi-content h4 {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--osmoze-ink);
	margin: 18px 0 8px 0;
	letter-spacing: -0.01em;
}
.rfi-content h5 {
	margin-top: 0;
}
.rfi-content p {
	font-size: 0.95em;
	line-height: 1.65;
	color: #444;
}

.rfi-section .col_half {
	margin-bottom: 0;
}

/* Grille 2x2 conformité — remplace l'ancien container/col_half qui
   imposait la largeur Canvas (1220px) à l'intérieur de .rfi-content
   et faisait déborder la colonne droite hors écran. */
.rfi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 28px;
	margin-top: 18px;
}
@media (max-width: 768px) {
	.rfi-grid {
		grid-template-columns: 1fr;
	}
}
.rfi-grid-item h5 {
	color: var(--osmoze-teal);
	font-size: 1.05em;
	margin: 0 0 6px 0;
	font-weight: 700;
}
.rfi-grid-item h5 i {
	margin-right: 6px;
}
.rfi-grid-h5-aside {
	font-weight: 400;
	font-size: 0.85em;
	color: #888;
}
.rfi-grid-item p {
	font-size: 0.92em;
	line-height: 1.55;
	margin: 0;
}

.rfi-audit-list {
	list-style: none;
	padding-left: 0;
	margin: 18px 0 0 0;
}
.rfi-audit-list li {
	padding: 10px 14px 10px 36px;
	position: relative;
	font-size: 0.95em;
	line-height: 1.55;
	color: #333;
	border-bottom: 1px solid #f3f3f3;
}
.rfi-audit-list li:last-child {
	border-bottom: 0;
}
.rfi-audit-list li::before {
	content: "✓";
	position: absolute;
	left: 12px;
	top: 10px;
	color: var(--osmoze-teal);
	font-weight: 700;
}

/* ============================================================
   PART 12 — Cards Pérennité (Heavenize, 2026-05-07)
   ============================================================ */

.content-wrap .feature-box.perennite-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 28px 22px;
	margin-bottom: 22px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.content-wrap .feature-box.perennite-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.perennite-card .fbox-icon.perennite-fa-icon {
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	position: static !important;
}
.perennite-card .fbox-icon.perennite-fa-icon > i {
	color: #fff !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
}
.perennite-card h4 {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: var(--osmoze-ink);
	line-height: 1.3;
}
.perennite-card p {
	font-size: 0.92em;
	line-height: 1.6;
	color: #444;
	margin: 0;
}

/* ============================================================
   PART 13 — Page cas client — chaîne 6 maillons (2026-05-07)
   ============================================================ */

/* Chaîne décision → simulation → analyse → saisie d'ordre →
   compliance → table de négociation. Visuel signature de la page
   cas-pm-passage-ordres. Sur desktop : flèches horizontales.
   Sur mobile : pile verticale avec flèches vers le bas. */
.chaine-decision {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 24px 12px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.chaine-step {
	flex: 0 1 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	min-width: 110px;
	text-align: center;
}
.chaine-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 0.95em;
	box-shadow: 0 2px 6px rgba(0, 167, 157, 0.25);
}
.chaine-label {
	font-size: 0.88em;
	font-weight: 600;
	color: var(--osmoze-ink);
	line-height: 1.3;
}
.chaine-arrow {
	color: var(--osmoze-teal);
	font-size: 0.9rem;
	flex: 0 0 auto;
	display: inline-flex;
}
@media (max-width: 991px) {
	.chaine-decision {
		flex-direction: column;
	}
	.chaine-arrow {
		transform: rotate(90deg);
	}
}

/* ============================================================
   PART 14 — Cards Résultats (page cas client, 2026-05-07)
   ============================================================ */

.content-wrap .feature-box.resultat-card {
	background: #fff;
	border-radius: 14px;
	padding: 28px 18px;
	margin-bottom: 22px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-wrap .feature-box.resultat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.resultat-card .fbox-icon.resultat-fa-icon {
	flex: 0 0 64px !important;
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	max-width: 64px !important;
	min-height: 64px !important;
	max-height: 64px !important;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px auto !important;
	padding: 0 !important;
	position: static !important;
}
.resultat-card .fbox-icon.resultat-fa-icon > i {
	color: #fff !important;
	font-size: 1.7rem !important;
	line-height: 1 !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
}
.resultat-card h3 {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--osmoze-teal);
	margin: 0 0 10px 0;
	line-height: 1.2;
}
.resultat-card h4 {
	font-size: 0.95em;
	font-weight: 400;
	color: #555;
	margin: 0;
	line-height: 1.5;
}

/* ============================================================
   PART 15 — Page cas client : hero signalétique + listes + cards v2
   ============================================================ */

/* Bandeau de signalétique chiffrée dans le hero (5 chiffres en flex) */
.hero-signaletique {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin: 24px auto 0;
	max-width: 720px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 8px;
}
.hero-signaletique > div {
	flex: 1 1 110px;
	text-align: center;
	padding: 10px 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-signaletique > div:last-child { border-right: 0; }
.hero-signaletique > div strong {
	display: block;
	font-size: 1.6em;
	color: var(--osmoze-teal);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.hero-signaletique > div span {
	display: block;
	font-size: 0.78em;
	color: #d8d8d8;
	margin-top: 4px;
	letter-spacing: 0.02em;
}
@media (max-width: 767px) {
	.hero-signaletique > div {
		flex: 1 1 50%;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
}

/* Liste check moderne (utilisée dans Problème + Solution) */
.cas-check {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.cas-check li {
	padding: 10px 0 10px 32px;
	position: relative;
	font-size: 0.98em;
	line-height: 1.55;
	color: #333;
	border-bottom: 1px solid #ececec;
}
.cas-check li:last-child {
	border-bottom: 0;
}
.cas-check li::before {
	content: "✓";
	position: absolute;
	left: 6px;
	top: 12px;
	color: var(--osmoze-teal);
	font-weight: 700;
	font-size: 1.05em;
}

/* Cards Résultats V2 — punchy, uniformes, icônes plus visibles */
.resultats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 10px;
}
@media (max-width: 991px) {
	.resultats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.resultats-grid { grid-template-columns: 1fr; }
}

.resultat-card-v2 {
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	position: relative;
	overflow: hidden;
	min-height: 100%;
}
.resultat-card-v2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%);
}
.resultat-card-v2:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.resultat-icon-v2 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--osmoze-teal-soft);
	color: var(--osmoze-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
	margin-bottom: 18px;
	box-shadow: 0 2px 10px rgba(0, 167, 157, 0.12);
}

.resultat-figure {
	font-size: 2.8em;
	font-weight: 700;
	line-height: 1;
	color: var(--osmoze-teal);
	letter-spacing: -0.025em;
	margin-bottom: 10px;
	font-feature-settings: "tnum" 1;
}
.resultat-figure i {
	font-size: 0.8em;
}
.resultat-label {
	font-size: 1em;
	font-weight: 700;
	color: var(--osmoze-ink);
	line-height: 1.3;
	margin-bottom: 6px;
}
.resultat-detail {
	font-size: 0.85em;
	color: #666;
	line-height: 1.5;
}

/* ============================================================
   PART 16 — Fix #pointsforts color sur les pages cas existantes
   ============================================================
   Canvas style.css l. 13331-13342 force #pointsforts en color: #fff
   + background gradient bleu foncé. Sur les pages cas existantes
   (gestion-diversifiee, direction-financiere-assurance, perf-gerant,
   stock-picking, caceis-osmoze), un inline style="background: #f9f9f9"
   override le fond bleu mais le color: white subsiste → texte
   illisible blanc sur gris clair (bug rapporté 2026-05-07). */
section#pointsforts[style*="background"],
section#pointsforts.content-wrap {
	color: var(--osmoze-ink) !important;
}
section#pointsforts[style*="background"] h3,
section#pointsforts[style*="background"] h4,
section#pointsforts[style*="background"] p,
section#pointsforts.content-wrap h3,
section#pointsforts.content-wrap h4,
section#pointsforts.content-wrap p {
	color: var(--osmoze-ink) !important;
}
section#pointsforts[style*="background"] h4,
section#pointsforts.content-wrap h4 {
	color: #555 !important;
}

/* ============================================================
   PART 17 — Illustration cas client (col_one_third + texte côté)
   ============================================================ */

.cas-illustration {
	padding-top: 8px;
}
.cas-illustration img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Container Problème (cas client) : flexbox pour empêcher la liste
   cas-check de wrapper sous l'image. Le .heading-block du titre
   "Le problème" est forcé en pleine largeur pour rester au-dessus
   (pas dans la rangée image+texte). */
@media (min-width: 768px) {
	.content-wrap .container.clearfix:has(> .cas-illustration) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0 24px;
	}
	.content-wrap .container.clearfix:has(> .cas-illustration) > .heading-block {
		flex: 0 0 100%;
		width: 100%;
	}
	.content-wrap .container.clearfix:has(> .cas-illustration) > .cas-illustration {
		flex: 0 0 calc(33.33% - 16px);
		float: none !important;
		margin-right: 0 !important;
	}
	.content-wrap .container.clearfix:has(> .cas-illustration) > .col_two_third.col_last {
		flex: 1 1 0;
		float: none !important;
		margin-left: 0 !important;
		padding-left: 0;
	}
}

@media (max-width: 767px) {
	.cas-illustration {
		margin-bottom: 24px;
		text-align: center;
	}
	.cas-illustration img {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ============================================================
   PART 18 — Icônes FA dans la page IA (framework + agents)
   ============================================================
   Override des règles Canvas qui appliquent background + border-radius
   sur l'<i> Font Awesome. Compatible fbox-left (framework) et
   fbox-center (agents). Pastille teal+blue gradient + glyphe blanc. */

/* Approche uniforme : FA en bleu-teal "plat", taille comparable aux PNG
   Canvas (~50px). Pas de pastille, pas de gradient — pour cohérence
   visuelle avec les autres icônes PNG bleues de la page IA. */
.feature-box .fbox-icon.ia-fa-icon {
	width: 70px !important;
	height: 70px !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

/* Pour fbox-center : centrer la pastille au-dessus, pas en absolute */
.feature-box.fbox-center .fbox-icon.ia-fa-icon {
	position: static !important;
	margin: 0 auto 18px auto !important;
	display: inline-flex !important;
}

/* Glyphe FA : bleu Canvas plus foncé/saturé (teinte des PNG existantes,
   qui sont en bleu marine plein) + taille ~80px équivalente au rendu
   PNG. Override total de Canvas style.css 7150-7160. */
.feature-box .fbox-icon.ia-fa-icon > i,
.feature-box .fbox-icon.ia-fa-icon > i.fa-solid {
	color: #0083b8 !important;
	font-size: 5rem !important;
	line-height: 1 !important;
	display: inline-block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Wrapper plus grand pour accueillir font-size 5rem */
.feature-box .fbox-icon.ia-fa-icon {
	width: 80px !important;
	height: 80px !important;
}

/* Box "votre prochain agent" : icône en gris discret pour signaler "à venir" */
.feature-box.next-agent-card .fbox-icon.ia-fa-icon > i {
	color: #bbb !important;
}

/* TOUT à gauche dans chaque pilier (override fbox-center qui center
   tout par défaut). Choix éditorial validé 2026-05-08 : alignement
   left donne un look plus pro et plus lisible que tout centré. */
.pilier-card,
.content-wrap .feature-box.pilier-card {
	text-align: left !important;
}

/* Icône : CENTRÉE dans la card (testé 2026-05-07), taille uniforme */
.pilier-card .fbox-icon {
	margin: 0 auto 20px auto !important;
	min-height: auto;
	width: auto;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: static !important;
	text-align: center;
}
.pilier-card .fbox-icon img.icon {
	max-height: 72px;
	width: auto;
	height: auto;
	margin: 0 !important;
}

/* Icône Font Awesome : pastille colorée teal, carré strict.
   Override aggressif des règles Canvas (style.css ligne 7131-7160)
   qui appliquent position: absolute + width/height 80x80 sur
   .fbox-icon ET background-color + border-radius: 50% + width
   100%/height 100% sur le <i> interne. */
.pilier-card .fbox-icon.pilier-fa-icon {
	flex: 0 0 88px !important;
	width: 88px !important;
	height: 88px !important;
	min-width: 88px !important;
	max-width: 88px !important;
	min-height: 88px !important;
	max-height: 88px !important;
	aspect-ratio: 1 / 1;
	border-radius: 20px !important;
	background: linear-gradient(135deg, var(--osmoze-teal) 0%, var(--osmoze-blue) 100%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 8px 20px rgba(0, 167, 157, 0.32);
	margin: 0 auto 22px auto !important;
	padding: 0 !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
}

/* Reset complet du <i> Font Awesome (Canvas style.css le déforme) */
.pilier-card .fbox-icon.pilier-fa-icon > i,
.pilier-card .fbox-icon.pilier-fa-icon i.fa-solid {
	color: #fff !important;
	font-size: 2.5rem !important;
	line-height: 1 !important;
	display: inline-block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Friction : hauteur stricte 3em (= 2 lignes max) pour que le titre
   tombe à la même position verticale entre les 3 cards (DATA: 1 ligne
   utilisée mais 2 réservées → espace en bas, comme CALCULS/LANGAGE). */
.pilier-friction {
	height: 3em;
	min-height: 3em;
	max-height: 3em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Tagline : hauteur stricte 2 lignes max */
.pilier-tagline {
	height: 3.2em;
	min-height: 3.2em;
	max-height: 3.2em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* h3 sur 1 ligne, hauteur fixe pour parallélisme */
.pilier-card h3 {
	height: 1.55em;
	line-height: 1.55em;
	overflow: hidden;
}

/* Friction : italique, gris, marge généreuse sous pour aérer
   le titre DATA / CALCULS / LANGAGE qui suit. */
/* margin en !important : .feature-box p (style.css:7190, spécificité
   0,0,1,1) écrase sinon toutes les marges de nos <p> piliers. */
.pilier-friction {
	font-style: italic;
	color: #8a8a8a;
	font-size: 0.92em;
	margin: 0 0 36px 0 !important;
	line-height: 1.45;
	text-align: left;
}

/* Heading pilier : aligné à gauche, marge cohérente */
.pilier-card h3 {
	margin: 0 0 4px 0;
	font-size: 1.55em;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-align: left;
	color: var(--osmoze-ink);
}

/* Tagline (italique, sous le heading) */
.pilier-tagline {
	color: #555;
	font-size: 0.95em;
	margin: 0 0 16px 0 !important;
	line-height: 1.5;
	text-align: left;
}

/* Body : hauteur stricte (4 lignes max line-clamp) pour aligner
   les bullets verticalement entre les 3 cards, peu importe la
   longueur du texte de body. */
.pilier-body {
	margin: 0 0 18px 0 !important;
	font-size: 0.95em;
	line-height: 1.6;
	color: #444;
	text-align: left;
	height: 6.4em;
	min-height: 6.4em;
	max-height: 6.4em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* Bullets check : pas de hauteur stricte (sinon les lignes 2-3 se
   font couper). Le closing reste sticky en bas via margin-top: auto.
   Les hauteurs strictes en amont (friction 3em + h3 1.55em + tagline
   2.8em + body 6.4em) suffisent à aligner les bullets entre cards. */
.pilier-card ul.pilier-check {
	text-align: left;
	margin: 0 0 4px 0;
	padding-left: 0;
	list-style: none;
	font-size: 0.9em;
	line-height: 1.5;
}
.pilier-card ul.pilier-check li {
	padding-left: 22px;
	position: relative;
	margin-bottom: 8px;
	color: #444;
}
.pilier-card ul.pilier-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--osmoze-teal);
	font-weight: 700;
}

/* Closing positif : aligné à gauche, sticky en bas via flex.
   Comme body et bullets ont hauteurs strictes, le closing
   tombe désormais à la même position verticale entre les 3
   cards, et "Une seule vérité..." est aligné avec
   "Vous remontez..." et "Votre question..." */
.pilier-closing {
	color: var(--osmoze-teal);
	font-weight: 600;
	margin: auto 0 0 0 !important;
	padding-top: 8px;
	border-top: 1px solid var(--osmoze-teal-soft);
	font-size: 0.98em;
	line-height: 1.5;
	text-align: left;
}

/* ===========================================================
   PART 23 — Cards clients structurées (heavenize.html)
   ===========================================================
   Remplace l'ancien flex 5 cellules texte par une grille de
   cards : picto secteur en haut, tag uppercase, nom, tagline.
   Fond gris très clair, border discret, hover teal. */
.clients-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin-bottom: 35px;
}
@media (max-width: 991px) {
	.clients-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.clients-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.client-card {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px 16px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.client-card:hover {
	border-color: var(--osmoze-teal);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}
.client-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border: 1px solid #e5e7eb;
}
.client-card-icon i {
	font-size: 1.5rem;
	color: var(--osmoze-teal);
	line-height: 1;
}
.client-card-sector {
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--osmoze-teal);
	margin-bottom: 10px;
}
.client-card-name {
	font-size: 1.05em;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 12px 0;
	line-height: 1.25;
	min-height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.client-card-tag {
	font-size: 0.85em;
	color: #6b7280;
	line-height: 1.45;
	margin: 0 0 0 0;
	margin-top: auto;
}

/* ===========================================================
   PART 22 — Lien brevet INPI (heavenize.html)
   ===========================================================
   Style explicite sur les mentions du brevet FR 2.994.295 :
   teal Osmoze + soulignement discret + picto external link
   pour signaler clairement que c'est cliquable. */
a.link-brevet,
a.link-brevet:visited {
	color: var(--osmoze-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a.link-brevet:hover {
	color: var(--osmoze-blue);
	text-decoration-thickness: 2px;
}
a.link-brevet i {
	font-size: 0.78em;
	margin-left: 2px;
	opacity: 0.85;
}

/* ===========================================================
   PART 21 — Bloc partenaire Microsoft (heavenize.html)
   ===========================================================
   Remplace l'ancien PNG blanc-sur-blanc par un bloc lisible :
   logo FA brand "fa-microsoft" + label texte. Hauteur alignée
   avec le logo Caceis (48px). */
.partner-microsoft {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.partner-microsoft i.fa-microsoft {
	font-size: 2.4rem;
	line-height: 1;
	color: #5e5e5e;
}
.partner-microsoft .partner-microsoft-label {
	font-size: 1.05em;
	font-weight: 600;
	color: #5e5e5e;
	letter-spacing: 0.02em;
}

/* ===========================================================
   PART 20 — Lien LinkedIn équipe (heavenize.html)
   =========================================================== */
.team-linkedin {
	margin-top: 14px;
	font-size: 0.95em;
}
.team-linkedin a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0077b5;
	font-weight: 600;
	text-decoration: none;
}
.team-linkedin a:hover {
	color: #005d91;
	text-decoration: underline;
}
.team-linkedin i {
	font-size: 1.4em;
	line-height: 1;
}

/* ===========================================================
   PART 26 — Note transparence Engine vs couche IA (ia-front-office.html)
   ===========================================================
   Encart placé après le hero, qui précise que l'Engine est en
   production depuis 2012 mais que la couche IA vient d'être
   livrée. Frame "premiers clients pilotes" pour transformer
   l'honnêteté en proposition différenciante. Visuel discret
   mais visible : fond gris très clair, picto info teal,
   typographie sobre. */
.ia-transparency-note {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	max-width: 920px;
	margin: 0 auto;
	padding: 22px 26px;
	background: #ffffff;
	border: 1px solid #e0e6e9;
	border-left: 4px solid var(--osmoze-teal);
	border-radius: 6px;
}
.ia-transparency-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ia-transparency-icon i {
	color: var(--osmoze-teal);
	font-size: 1.6rem;
	line-height: 1;
}
.ia-transparency-body {
	flex: 1;
}
.ia-transparency-body p {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
	color: #333;
}
.ia-transparency-body strong {
	color: var(--osmoze-ink);
}
@media (max-width: 600px) {
	.ia-transparency-note {
		flex-direction: column;
		gap: 12px;
		padding: 18px 20px;
	}
}

/* ===========================================================
   PART 25 — IE axes grid (osmoze.html)
   ===========================================================
   Remplace l'ancien bloc "récit fondateur + timeline 7 jalons"
   sur osmoze.html (qui doublonnait heavenize.html). Trois cards
   compactes : concept précurseur / continuité avec l'IA /
   production proof. La timeline complète + le récit détaillé
   restent sur heavenize.html (page corporate / fondateur). */
.ie-axes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 30px;
}
@media (max-width: 991px) {
	.ie-axes-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}
.ie-axe-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-top: 4px solid var(--osmoze-teal);
	border-radius: 8px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ie-axe-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}
.ie-axe-tag {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--osmoze-teal);
	margin-bottom: 12px;
}
.ie-axe-card h4 {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--osmoze-ink);
	margin: 0 0 14px 0;
	line-height: 1.3;
}
.ie-axe-card p {
	font-size: 0.96em;
	line-height: 1.65;
	color: #444;
	margin: 0;
}

/* CTA "L'histoire complète du moteur" — vers heavenize.html#convergence */
.ie-cta-history {
	text-align: center;
	margin-top: 30px;
	font-size: 0.98em;
}
.ie-cta-history a {
	color: var(--osmoze-teal);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--osmoze-teal-soft);
	padding-bottom: 3px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ie-cta-history a:hover {
	color: var(--osmoze-blue);
	border-bottom-color: var(--osmoze-blue);
}
.ie-cta-history a i {
	margin-left: 6px;
	font-size: 0.85em;
}

/* ===========================================================
   PART 24 — Bloc Portfolio Autopilot (ia-front-office.html)
   ===========================================================
   Aligné à gauche de manière assumée (et non centré bancal),
   avec un filet vert vif (jaune-vert R&D) qui ancre le bloc à
   gauche pour que l'alignement soit perçu comme un choix de
   design. Largeur de lecture max 920px. */
.autopilot-promo .container {
	text-align: left;
}
.autopilot-block {
	max-width: 920px;
	margin: 0;
	padding-left: 24px;
	border-left: 4px solid #c2d500;
}
.autopilot-eyebrow {
	color: #c2d500;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 12px 0;
	font-weight: 700;
}
.autopilot-title {
	color: #ffffff;
	font-size: 2.2em;
	margin: 0 0 18px 0;
	line-height: 1.15;
}
.autopilot-body {
	color: #eee;
	font-size: 1.08em;
	line-height: 1.65;
	margin: 0;
}
.autopilot-body strong {
	color: #ffffff;
}
@media (max-width: 768px) {
	.autopilot-block {
		padding-left: 16px;
	}
	.autopilot-title {
		font-size: 1.7em;
	}
	.autopilot-body {
		font-size: 1em;
	}
}

/* ===========================================================
   PART 19 — cas-check alignée au texte (feature-box / IA page)
   ===========================================================
   Dans une .feature-box, les <p> partent du bord interne de la
   card. cas-check par défaut indente le texte de 32px (check en
   absolute à 6px). Pour aligner le texte de la liste avec le
   paragraphe au-dessus, on passe en flex inline : check en
   préfixe, texte aligné au bord interne. */
.feature-box .cas-check li {
	padding: 10px 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.feature-box .cas-check li::before {
	position: static;
	left: auto;
	top: auto;
	flex: 0 0 auto;
	line-height: 1.55;
}