:root{
	--blue:#18a7cf;
	--blue-dark:#0f88ad;
	--orange:#f2b233;
	--text:#2b2f33;
	--muted:#6c7a86;
	--bg:#ffffff;
	--soft:#f5f9fb;
	--card:#ffffff;
	--border:rgba(16, 32, 44, .10);
	--shadow:0 14px 34px rgba(16, 32, 44, .08);
	--radius:18px;
	--max:1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
img{ max-width:100%; display:block; }

.page{ width:100%; }
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 18px; }

.center{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
.mt-20{ margin-top:20px; }
.mt-28{ margin-top:28px; }
.mt-32{ margin-top:32px; }

.h2-center{
	text-align: center;
	color: var(--blue);
	font-size: 25px;
	line-height: 1.15;
	margin: 0 0 30px 0;
	letter-spacing: .2px;
	text-transform: uppercase !important;
}

.p-center{
	text-align:center;
	margin:0;
}

.muted{ color:var(--muted); }

/* BUTTONS */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	border-radius:12px;
	padding:12px 18px;
	font-weight:800;
	text-decoration:none;
	border:1px solid transparent;
	cursor:pointer;
	transition:transform .05s ease, filter .15s ease, background .15s ease, border-color .15s ease;
	user-select:none;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
	background:var(--blue);
	color:#fff;
	box-shadow:0 10px 22px rgba(24,167,207,.20);
	text-transform: uppercase;
}
.btn-primary:hover{ filter:brightness(0.98); background:var(--blue-dark); }

.btn-orange{
	background:var(--orange);
	color:#fff;
	box-shadow:0 10px 22px rgba(242,178,51,.22);
	text-transform: uppercase;
}
.btn-orange:hover{ filter:brightness(.98); }

.btn-lg{
	padding:14px 22px;
	border-radius:14px;
	font-size:16px;
	text-transform: uppercase;
}

/* BLOCKS */
.block{
	padding:54px 0;
}

/* HERO (même ADN que ton accueil) */
.hero{
	position:relative;
	min-height:260px;
	overflow:hidden;
	background:linear-gradient(180deg, rgba(10,25,35,.05), rgba(10,25,35,0));
}
.hero-bg{
	position:absolute;
	inset:0;
	z-index:0;
}
.hero-bg-img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center bottom;
	filter:saturate(1.02);
	opacity:.35;
}
.hero-inner{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:22px;
	padding:30px 18px;
}
.hero-left{ flex:1; min-width:280px; }
.hero-right{ width:min(380px, 40%); display:flex; justify-content:flex-end; }
.hero-illustration{ width:100%; max-width:360px; height:auto; }

.hero-kicker{
	display:inline-flex;
	align-items:center;
	gap:10px;
	background: rgba(24,167,207,.10);
	border: 1px solid rgba(24,167,207,.18);
	color: var(--blue-dark);
	font-weight: 900;
	padding: 8px 12px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .3px;
	font-size: 12px;
	margin-bottom: 12px;
}

.hero-title{
	margin:0 0 14px 0;
	font-size:38px;
	line-height:1.05;
	letter-spacing:.2px;
	color:#3b434a;
}
.hero-title-accent{
	color:var(--orange);
	font-weight:900;
}
.hero-actions{ margin-top: 10px; }

/* INTRO CARD */
.block-intro{
	padding: 28px 0 10px;
}
.intro-card{
	background:#fff;
	border:1px solid var(--border);
	border-radius:22px;
	box-shadow:var(--shadow);
	padding:22px 20px;
}
.intro-lead{
	margin:0;
	color:#4a555e;
	line-height:1.65;
	font-weight: 700;
	font-size: 16px;
}
.intro-cta{
	margin-top:16px;
	display:flex;
	justify-content:center;
}

/* REASONS */
.block-reasons{
	background:
		radial-gradient(circle at 15% 25%, rgba(24,167,207,.10), transparent 40%),
		radial-gradient(circle at 85% 30%, rgba(242,178,51,.10), transparent 40%),
		linear-gradient(180deg, #fff, #fff);
}

.reasons-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:14px;
}

.reason{
	background:rgba(255,255,255,.95);
	border:1px solid var(--border);
	border-radius:22px;
	box-shadow:var(--shadow);
	padding:18px 18px;
	position:relative;
	overflow:hidden;
}

.reason:before{
	content:"";
	position:absolute;
	left:18px;
	top:18px;
	width:18px;
	height:18px;
	border-radius:4px;
	background:rgba(24,167,207,.12);
	border:2px solid rgba(24,167,207,.35);
}
.reason:after{
	content:"✓";
	position:absolute;
	left:22px;
	top:14px;
	color:var(--blue);
	font-weight:900;
	font-size:16px;
}

.reason-title{
	padding-left:34px;
	color:#4a555e;
	font-weight:900;
	line-height:1.45;
	font-size:15px;
}

/* LOGO STRIP (repris de ton CSS) */
.logo-strip{
	width: 100%;
	background: linear-gradient(180deg, rgba(24,167,207,.08), rgba(255,255,255,0));
	border-top: 1px solid rgba(16,32,44,.08);
	border-bottom: 1px solid rgba(16,32,44,.08);
	padding: 46px 0 40px;
	overflow: hidden;
}

.logo-strip-title{
	text-align:center;
	color: var(--blue);
	font-size: 25px;
	line-height: 1.1;
	margin: 0 0 14px 0;
	letter-spacing: .6px;
	text-transform: uppercase;
	font-weight: 900;
}

.logo-strip-inner{
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.logo-viewport{
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.logo-track{
	display:flex;
	gap: 80px;
	align-items:center;
	width: max-content;
	padding: 18px 28px;
	will-change: transform;
	transform: translateX(0);
	animation: none !important;
}

.logo-item{
	height: 180px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 36px 52px;
	border-radius: 999px;
	background: rgba(255,255,255,.95);
	border: 1px solid rgba(16,32,44,.10);
	box-shadow: 0 10px 22px rgba(16,32,44,.06);
}

.logo-item img{
	height: 120px;
	max-width: 900px;
	width: auto;
	object-fit: contain;
	display:block;
}

/* RESPONSIVE */
@media (max-width: 980px){
	.hero-title{ font-size:32px; }
	.hero-right{ display:none; }
	.reasons-grid{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
	.hero-inner{ flex-direction:column; align-items:flex-start; }
	.hero-title{ font-size:28px; }
	.logo-strip-title{ font-size: 22px; }
	.logo-track{ gap: 46px; padding: 16px 18px; }
	.logo-item{ height: 220px; padding: 26px 34px; }
	.logo-item img{ height: 160px; max-width: 720px; }
}

.cta-adhesion{
    margin: 70px auto 40px;
    padding: 48px 28px;
    max-width: 720px;
    text-align: center;

    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 18px 48px rgba(16,32,44,.08);
    border: 1px solid rgba(16,32,44,.06);
}

.cta-adhesion .btn{
    margin-bottom: 22px;
    font-size: 17px;
    padding: 16px 30px;
    border-radius: 16px;
}

.cta-sub{
    margin: 0;
    font-size: 17px;
    color: #6f7a84;
    line-height: 1.6;
}

.cta-sub a{
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(24,167,207,.25);
    transition: all .2s ease;
}

.cta-sub a:hover{
    border-bottom-color: var(--blue);
}

section.colored{
	background: #f0f0f3 !important;
}