/* Header/footer minimalistes de la landing partenaire /medirent/.
 * Le reste (fiche produit) vient de woocommerce.css + product.css, deja
 * enqueues sur ce template (cf inc/enqueues.php). Tokens design-system.css
 * uniquement, aucune teinte locale (DESIGN-RULES.md regle d'or). */

.gk-medirent-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 32px;
	border-bottom: 1px solid var(--gk-line);
	background: var(--gk-paper);
}

.gk-medirent-header__logo img {
	display: block;
	height: 32px;
	width: auto;
}

.gk-medirent-header__x {
	font-size: 20px;
	color: var(--gk-ink-soft);
	font-weight: 300;
}

/* Le logo Medirent fait 63px de haut en natif contre 32px pour le lockup
 * Gekomed : on le cale a 40px, sa signature "your health partner" restant
 * lisible, pour un equilibre optique entre les deux marques. */
.gk-medirent-header__partner {
	display: inline-flex;
	align-items: center;
}

.gk-medirent-header__partner img {
	display: block;
	height: 40px;
	width: auto;
}

.gk-medirent-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 24px 32px;
	border-top: 1px solid var(--gk-line);
	font-family: var(--gk-sans);
	font-size: 13px;
	color: var(--gk-ink-soft);
}

.gk-medirent-footer a {
	color: var(--gk-ink-soft);
	text-decoration: underline;
}

/* Section "Le partenariat" a onglets (remplace les produits similaires sur
 * cette landing). Tokens design-system uniquement. */

.gk-medirent-about__head {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.gk-medirent-about__title {
	font-family: var(--gk-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 60px);
	letter-spacing: -0.02em;
	color: var(--gk-ink);
	margin: 8px 0 0;
}

.gk-medirent-about__tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--gk-paper);
	border: 1px solid var(--gk-line);
	border-radius: var(--gk-radius-pill);
	margin-bottom: clamp(24px, 3vw, 40px);
}

.gk-medirent-about__tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 12px 26px;
	border-radius: var(--gk-radius-pill);
	background: transparent;
	font-family: var(--gk-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gk-ink-soft);
	transition: background .25s ease, color .25s ease;
}

.gk-medirent-about__tab:hover { color: var(--gk-ink); }

.gk-medirent-about__tab.is-active {
	background: var(--gk-green-deep);
	color: var(--gk-paper);
}

.gk-medirent-about__panel {
	display: none;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.gk-medirent-about__panel.is-active {
	display: grid;
	animation: gk-medirent-fade .25s ease;
}

@keyframes gk-medirent-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Ratio carre identique sur les deux onglets : evite le saut de hauteur au
 * changement d'onglet. Seul ratio qui cadre correctement les deux sources,
 * l'une portrait (600x900) et l'autre paysage (650x401). */
.gk-medirent-about__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--gk-radius-lg);
	overflow: hidden;
	background: var(--gk-paper);
	border: 1px solid var(--gk-line);
}

.gk-medirent-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Photo portrait : recadrage haut pour garder le visage et la genouillere
 * dans le cadre carre. */
#gkmd-panel-gekomed .gk-medirent-about__media img {
	object-position: center 30%;
}

.gk-medirent-about__subtitle {
	font-family: var(--gk-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 42px);
	letter-spacing: -0.02em;
	color: var(--gk-ink);
	margin: 10px 0 16px;
}

.gk-medirent-about__lede {
	font-family: var(--gk-sans);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
	color: var(--gk-ink-soft);
	max-width: 56ch;
	margin: 0 0 var(--gk-space-md);
}

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

.gk-medirent-about__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--gk-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--gk-ink);
}

.gk-medirent-about__points svg {
	flex: none;
	margin-top: 2px;
	color: var(--gk-green-deep);
}

@media (max-width: 720px) {
	.gk-medirent-about__panel.is-active { grid-template-columns: 1fr; }
	.gk-medirent-about__tabs { display: flex; width: 100%; }
	/* 16px de padding = 48px de haut : cible tactile confortable au pouce
	 * (40px en desktop passe sous le minimum recommande). */
	.gk-medirent-about__tab { flex: 1; padding: 16px; }

}

@media (max-width: 640px) {
	.gk-medirent-header { padding: 16px 20px; }
	.gk-medirent-footer { padding: 20px; justify-content: flex-start; }
}