/* === GEKOMED - Page /remboursement/ === */
/* Aligne sur la DA des pages secondaires (Contact, Blog, Guide) */

.gkrem {
	background: var(--gk-cream);
	color: var(--gk-ink);
}

/* HERO centered (style blog) */
.gkrem__hero {
	padding: 84px 32px 56px;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(15,61,46,.05), transparent 60%),
		linear-gradient(180deg, #FFFFFF 0%, var(--gk-cream) 100%);
	text-align: center;
}
.gkrem__hero-inner {
	max-width: 720px;
	margin: 0 auto;
}
.gkrem__eyebrow {
	display: inline-block;
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gk-green-deep);
	background: var(--gk-green-soft);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 22px;
}
.gkrem__title {
	font-family: var(--gk-display);
	font-weight: 400;
	font-size: clamp(42px, 6vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--gk-green-deep);
	margin: 0 0 18px;
}
.gkrem__title em { font-style: italic; font-family: var(--gk-serif); font-weight: 400; }
.gkrem__lede {
	max-width: 580px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--gk-ink-soft);
}
.gkrem__lede strong { color: var(--gk-ink); font-weight: 600; }
.gkrem__hero-meta {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--gk-ink-soft);
}
.gkrem__hero-meta strong { color: var(--gk-green-deep); font-weight: 600; font-family: var(--gk-mono); }
.gkrem__hero-sep { font-family: var(--gk-display); opacity: .35; }
@media (max-width: 700px) { .gkrem__hero { padding: 56px 22px 40px; } }

/* Section eyebrow (inner) */
.gkrem__section-eyebrow {
	display: inline-block;
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gk-sage, var(--gk-ink-soft));
}

/* FLOW STEPS */
.gkrem__flow { padding: 80px 32px 32px; background: var(--gk-paper); border-top: 1px solid var(--gk-line); }
.gkrem__flow-inner { max-width: 1180px; margin: 0 auto; }
.gkrem__flow-head {
	margin-bottom: clamp(32px, 5vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
}
.gkrem__flow-head h2 {
	font-family: var(--gk-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--gk-ink);
	margin: 0;
}
.gkrem__flow-head h2 em {
	font-family: var(--gk-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--gk-ink);
}
.gkrem__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.gkrem__step {
	background: var(--gk-cream);
	border: 1px solid var(--gk-line);
	border-radius: var(--gk-radius-md);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.gkrem__step:hover { transform: translateY(-4px); border-color: var(--gk-green-deep); }
.gkrem__step-num {
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--gk-green-deep);
	background: var(--gk-green-soft);
	padding: 6px 12px;
	border-radius: 999px;
	align-self: flex-start;
}
.gkrem__step-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gk-green-soft);
	color: var(--gk-green-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gkrem__step-icon svg { width: 22px; height: 22px; }
.gkrem__step h3 {
	font-family: var(--gk-display);
	font-size: 19px;
	line-height: 1.2;
	font-weight: 500;
	margin: 0;
	color: var(--gk-ink);
}
.gkrem__step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gk-ink-soft);
}

/* SPLIT */
.gkrem__split { padding: 32px 32px 80px; background: var(--gk-cream); }
.gkrem__split-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.gkrem__split-left h2 {
	font-family: var(--gk-display);
	font-size: clamp(34px, 5vw, 60px);
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 14px 0 16px;
	line-height: 1.05;
	color: var(--gk-ink);
}
.gkrem__split-left h2 em { font-family: var(--gk-serif); font-style: italic; font-weight: 400; color: var(--gk-ink); }
.gkrem__split-lede { color: var(--gk-ink-soft); font-size: 16px; line-height: 1.6; max-width: 520px; margin: 0; }

.gkrem__bars { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.gkrem__bar { display: flex; align-items: center; gap: 16px; }
.gkrem__bar-label {
	flex-shrink: 0;
	width: 110px;
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gk-ink-soft);
}
.gkrem__bar-track {
	flex: 1;
	height: 28px;
	background: var(--gk-paper);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--gk-line);
}
.gkrem__bar-fill {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 14px;
	color: #fff;
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	border-radius: 999px;
	min-width: 50px;
	width: 0;
	transition: width 1.3s cubic-bezier(.16,1,.3,1);
}
.gkrem__bars.is-revealed .gkrem__bar-fill { width: var(--bar-w, 0%); }
.gkrem__bars.is-revealed .gkrem__bar:nth-child(2) .gkrem__bar-fill { transition-delay: .12s; }
.gkrem__bars.is-revealed .gkrem__bar:nth-child(3) .gkrem__bar-fill { transition-delay: .24s; }
.gkrem__bar-fill--secu { background: var(--gk-green-deep); }
.gkrem__bar-fill--mutuelle { background: #6E9F7B; }
.gkrem__bar-fill--zero { background: var(--gk-ink-soft); }
.gkrem__small {
	margin-top: 18px;
	font-size: 12px;
	color: var(--gk-ink-soft);
	letter-spacing: 0.02em;
}

.gkrem__card {
	background: var(--gk-green-deep);
	color: #fff;
	border-radius: var(--gk-radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.gkrem__card-eyebrow {
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.7;
}
.gkrem__card h3 {
	font-family: var(--gk-display);
	font-size: 28px;
	font-weight: 400;
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.gkrem__card h3 em { font-family: var(--gk-serif); font-style: italic; color: inherit; }
.gkrem__card p { margin: 0; opacity: 0.85; font-size: 15px; line-height: 1.55; }
.gkrem__check { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.gkrem__check li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.gkrem__check svg { color: #B5DDB7; flex-shrink: 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
	.gkrem__steps { grid-template-columns: repeat(2, 1fr); }
	.gkrem__split-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
	.gkrem__flow { padding: 56px 22px; }
	.gkrem__split { padding: 56px 22px; }
	.gkrem__steps { grid-template-columns: 1fr; }
	.gkrem__bar { gap: 10px; }
	.gkrem__bar-label { width: 80px; font-size: 10px; }
	.gkrem__card { padding: 24px; }
	.gkrem__card h3 { font-size: 24px; }
}

/* Mobile : carte "3 documents necessaires" en fond clair + texte sombre,
   meilleur contraste et coherence avec le reste de la page sur petit ecran. */
@media (max-width: 720px) {
	.gkrem__card {
		background: var(--gk-cream);
		color: var(--gk-ink);
		border: 1px solid var(--gk-line);
	}
	.gkrem__card-eyebrow { color: var(--gk-green-deep); opacity: 1; }
	.gkrem__card p { color: var(--gk-ink-soft); opacity: 1; }
	.gkrem__check svg { color: var(--gk-green-deep); }
}

/* FAQ alignee sur la section split (1180px container) */
.gkrem__faq { padding: 24px 32px 96px; background: #fff; }
.gkrem__faq-inner { max-width: 1180px; margin: 0 auto; }
.gkrem__faq h2 {
	text-align: left !important;
	margin: 0 0 14px !important;
	max-width: none !important;
}
.gkrem__faq-head { margin-bottom: 36px; }
.gkrem__faq-head .gkrem__section-eyebrow { margin-bottom: 14px; display: inline-block; }
.gkrem__faq-lede {
	margin: 0;
	max-width: 620px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--gk-ink-soft);
}
.gkrem__faq .gk-faq__list { margin: 0; max-width: none; }
.gkrem .gkblog__newsletter { padding-bottom: 40px; }
@media (max-width: 700px) {
	.gkrem__faq { padding: 16px 22px 64px; }
	.gkrem .gkblog__newsletter { padding-bottom: 28px; }
}

/* ===== Stepper scroll-driven "4 etapes" ===== */
.gkrem__stepper-scroll {
	/* Hauteur = nb d'etapes * 90vh pour scroller a travers */
	position: relative;
	margin-top: 32px;
}
.gkrem__stepper {
	position: sticky;
	top: 120px;
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: stretch;
}
.gkrem__stepper-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
}
.gkrem__stepper-left .gkrem__flow-head { margin: 0; }
.gkrem__stepper-left .gkrem__flow-head h2 {
	font-family: var(--gk-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.05;
	color: var(--gk-ink);
	margin: 12px 0 0;
	letter-spacing: -0.02em;
}
.gkrem__stepper-left .gkrem__flow-head h2 em {
	font-style: italic;
	font-family: var(--gk-serif);
	font-weight: 400;
	color: var(--gk-ink);
}
.gkrem__stepper-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
/* Centrage exact de la barre : dot fait 22px de large + padding 8px + position relative l = 11+8 = 19px - half (1.5/2) ~ 18.25px */
.gkrem__stepper-list::before {
	content: '';
	position: absolute;
	left: calc(8px + 11px - 0.75px); /* padding-left de li (8px) + moitie du dot (11px) - moitie largeur barre */
	top: 25px;
	bottom: 25px;
	width: 1.5px;
	background: var(--gk-line);
}
.gkrem__stepper-progress {
	position: absolute;
	left: calc(8px + 11px - 0.75px);
	top: 25px;
	bottom: 25px;
	width: 1.5px;
	background: var(--gk-green-deep);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .2s ease-out;
	z-index: 1;
}
.gkrem__stepper-list li.gkrem__stepper-item {
	margin: 0;
	padding: 14px 8px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	color: var(--gk-ink-soft);
	transition: color .2s ease;
}
.gkrem__stepper-dot {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gk-cream);
	border: 1.5px solid var(--gk-line);
	position: relative;
	z-index: 2;
	transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.gkrem__stepper-num {
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--gk-ink-soft);
	min-width: 26px;
	transition: color .25s ease;
}
.gkrem__stepper-label {
	font-family: var(--gk-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	color: var(--gk-ink);
	letter-spacing: -0.005em;
	transition: color .25s ease, font-weight .25s ease;
}
.gkrem__stepper-item.is-passed .gkrem__stepper-dot {
	background: var(--gk-green-mid);
	border-color: var(--gk-green-mid);
}
.gkrem__stepper-item.is-active .gkrem__stepper-dot {
	background: var(--gk-green-deep);
	border-color: var(--gk-green-deep);
	transform: scale(1.18);
	box-shadow: 0 0 0 5px rgba(15, 61, 46, .14);
}
.gkrem__stepper-item.is-active .gkrem__stepper-num { color: var(--gk-green-deep); }
.gkrem__stepper-item.is-active .gkrem__stepper-label {
	color: var(--gk-green-deep);
	font-weight: 600;
}

.gkrem__stepper-stage {
	position: relative;
	min-height: 440px;
	height: 60vh;
	max-height: 520px;
	margin-right: 0;
	border-radius: var(--gk-radius-lg);
	overflow: hidden;
	background: var(--gk-green-deep);
	transition: height .7s cubic-bezier(.16,1,.3,1),
	            max-height .7s cubic-bezier(.16,1,.3,1),
	            min-height .7s cubic-bezier(.16,1,.3,1),
	            margin-right .7s cubic-bezier(.16,1,.3,1),
	            border-radius .55s ease;
}
/* Pinned : la carte prend (a) toute la hauteur dispo (marges = top sticky) (b) deborde a droite jusqu'au bord viewport */
.gkrem__stepper.is-pinned .gkrem__stepper-stage {
	height: calc(100vh - 240px);
	max-height: none;
	min-height: 440px;
	/* Pousse le bord droit jusqu'a 24px du bord viewport. Container max-width 1180, padding 32. */
	margin-right: min(0px, calc(56px - (100vw - 1180px) / 2));
}
.gkrem__stepper-card {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
}
.gkrem__stepper-card.is-active {
	opacity: 1;
	pointer-events: auto;
}
.gkrem__stepper-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.22);
	transform-origin: center;
	transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.gkrem__stepper.is-pinned .gkrem__stepper-card.is-active .gkrem__stepper-card-bg {
	transform: scale(1);
}
.gkrem__stepper-card-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10,46,34,.25) 0%, rgba(10,46,34,.72) 70%, rgba(10,46,34,.92) 100%),
		linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%);
}
.gkrem__stepper-card-body {
	position: relative;
	z-index: 1;
	padding: 44px 48px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--gk-cream);
	transform: translateY(28px);
	opacity: .82;
	transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.gkrem__stepper.is-pinned .gkrem__stepper-card.is-active .gkrem__stepper-card-body {
	transform: translateY(0);
	opacity: 1;
}
.gkrem__stepper-card-num {
	display: inline-block;
	font-family: var(--gk-mono);
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--gk-cream);
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 5px 11px;
	border-radius: 999px;
	margin-bottom: 18px;
	width: fit-content;
}
.gkrem__stepper-card-icon {
	color: var(--gk-cream);
	margin-bottom: 18px;
	opacity: .85;
}
.gkrem__stepper-card-title {
	font-family: var(--gk-display);
	font-weight: 500;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.12;
	color: var(--gk-cream);
	margin: 0 0 14px;
	letter-spacing: -0.015em;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.gkrem__stepper-card-desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(250,248,244,.92);
	max-width: 480px;
	text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

@media (max-width: 880px) {
	.gkrem__stepper-scroll { height: auto !important; }
	.gkrem__stepper { position: static; grid-template-columns: 1fr; gap: 28px; top: auto; }
	.gkrem__stepper-stage { min-height: 320px; height: auto; max-height: none; }
	.gkrem__stepper-card-body { padding: 32px 26px; }
}

/* ============================================================
 * MOBILE : section "Comment ca marche" en slider horizontal.
 * On retire la sticky + la liste etapes a gauche, on passe les
 * cards en flex scroll-snap horizontal (1 card par viewport).
 * Toutes les cards sont visibles simultanement, l utilisateur swipe.
 * ============================================================ */
@media (max-width: 720px) {
	/* Masquer la liste d etapes (numerotee verticale a gauche) sur mobile,
	   le user navigue via le swipe horizontal et voit le numero dans chaque card. */
	.gkrem__stepper-list { display: none; }

	.gkrem__stepper-scroll { padding: 0; }

	.gkrem__stepper-left { margin: 0 0 8px; }
	.gkrem__stepper-left .gkrem__flow-head h2 { font-size: clamp(28px, 7vw, 36px); }

	/* Container devient un track flex horizontal scrollable */
	.gkrem__stepper-stage {
		display: flex;
		flex-direction: row;
		gap: 14px;
		min-height: 0;
		height: auto;
		max-height: none;
		background: transparent;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		padding: 4px 20px 12px;
		margin: 0 -20px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		transition: none;
	}
	.gkrem__stepper-stage::-webkit-scrollbar { display: none; }

	/* Chaque card devient une slide pleine largeur snappable */
	.gkrem__stepper-card {
		position: relative;
		inset: auto;
		flex: 0 0 calc(100vw - 64px);
		min-height: 420px;
		scroll-snap-align: center;
		border-radius: var(--gk-radius-lg);
		overflow: hidden;
		opacity: 1 !important;
		pointer-events: auto !important;
		background: var(--gk-green-deep);
	}

	/* Le background de chaque card doit etre visible des le repos (pas scale 1.22) */
	.gkrem__stepper-card-bg { transform: scale(1); }

	/* Le body de la card pleinement visible sans pinned state */
	.gkrem__stepper-card-body {
		transform: translateY(0);
		opacity: 1;
		padding: 28px 22px;
	}

	/* Numero en haut, plus visible */
	.gkrem__stepper-card-num { margin-bottom: 14px; }
	.gkrem__stepper-card-title { font-size: clamp(22px, 6vw, 28px); }
	.gkrem__stepper-card-desc { font-size: 14.5px; line-height: 1.55; }

	/* Cue (fleche / check) inutile en slider (le user swipe manuellement) */
	.gkrem__stepper-card-cue { display: none; }
}

/* Cue (fleche / check) en bas a droite des cartes expanded */
.gkrem__stepper-card-cue {
	position: absolute;
	right: 32px;
	bottom: 28px;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .9);
	color: #fff;
	z-index: 2;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease .15s, transform .5s ease .15s, border-color .25s ease;
}
.gkrem__stepper-card-cue svg { width: 26px; height: 26px; }
.gkrem__stepper.is-pinned .gkrem__stepper-card.is-active .gkrem__stepper-card-cue {
	opacity: 1;
	transform: translateY(0);
}
.gkrem__stepper-card.is-last .gkrem__stepper-card-cue {
	border-color: #B5DDB7;
	color: #B5DDB7;
}
.gkrem__stepper-card.is-last .gkrem__stepper-card-cue svg { width: 28px; height: 28px; }