/**
 * Styles partagés par les pages services (aéroport, MAD, tourisme).
 */

/* ============================================
   HERO SERVICES
   ============================================ */

.service-hero {
	position: relative;
	padding-block: clamp(60px, 10vw, 120px) clamp(40px, 6vw, 80px);
	background:
		radial-gradient(ellipse 70% 60% at 80% 20%, rgba(201, 169, 97, 0.12), transparent 60%),
		var(--bg);
	overflow: hidden;
}

.service-hero__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.service-hero__inner { grid-template-columns: 1fr; }
}

.service-hero__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--accent);
	margin-bottom: var(--space-md);
}

.service-hero__overline::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--accent);
}

.service-hero__title {
	font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-lg);
}

.service-hero__title em {
	font-style: italic;
	color: var(--accent);
}

.service-hero__lead {
	font-size: clamp(var(--fs-md), 1.6vw, var(--fs-lg));
	color: var(--text-muted);
	max-width: 560px;
	margin-bottom: var(--space-xl);
	line-height: var(--lh-relaxed);
}

.service-hero__highlight {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
}

.service-hero__highlight h3 {
	color: var(--accent);
	font-size: var(--fs-md);
	margin-bottom: var(--space-md);
}

.service-hero__highlight ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-hero__highlight li {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
	color: var(--text);
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
}

.service-hero__highlight li:last-child { border-bottom: 0; }

.service-hero__highlight li svg {
	width: 18px;
	height: 18px;
	color: var(--accent);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ============================================
   TABLEAU FORFAITS
   ============================================ */

.fares-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Variante 2 colonnes maxi (mise à disposition : berline + van) */
.fares-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 900px;
	margin: 0 auto;
}
@media (max-width: 700px) {
	.fares-grid--2 { grid-template-columns: 1fr; }
}

/* Tableau prix dans une fare-card */
.fare-table {
	width: 100%;
	border-collapse: collapse;
}
.fare-table th,
.fare-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
}
.fare-table tr:last-child th,
.fare-table tr:last-child td { border-bottom: 0; }
.fare-table th {
	color: var(--text-muted);
	font-weight: 500;
}
.fare-table th small { color: var(--text-muted); font-weight: 400; }
.fare-table td {
	text-align: right;
	color: var(--accent-hover);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
}
.fare-table td span {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	font-weight: 500;
}

.fare-card {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-base), border-color var(--transition-base);
}

.fare-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent);
}

.fare-card--featured {
	border-color: var(--accent);
	position: relative;
	box-shadow: 0 0 32px rgba(201, 169, 97, 0.15);
}

.fare-card--featured::before {
	content: '★ Le plus demandé';
	position: absolute;
	top: -1px;
	right: -1px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-bottom-left-radius: var(--radius-md);
}

.fare-card__header {
	padding: var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.fare-card__route {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: var(--space-xs);
}

.fare-card__name {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--text);
}

.fare-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.fare-card__price-amount {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
}

.fare-card__price-unit {
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.fare-card__body {
	padding: var(--space-lg);
	flex: 1;
}

.fare-card__features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fare-card__features li {
	padding: var(--space-xs) 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.fare-card__features li::before {
	content: '✓';
	color: var(--accent);
	font-weight: 700;
}

.fare-card__cta {
	padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.fare-card__cta .btn { width: 100%; }

/* ============================================
   "INCLUS DANS LE SERVICE" (icon list)
   ============================================ */

.includes-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.include-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
	background: var(--bg-alt);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.include-item__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: var(--on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.include-item__icon svg { width: 22px; height: 22px; }

.include-item__title {
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--text);
}

.include-item__text {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}

/* ============================================
   CIRCUITS TOURISME
   ============================================ */

.tour-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tour-card {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tour-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.tour-card__visual {
	aspect-ratio: 16/10;
	background: linear-gradient(135deg, var(--bg-elevated), var(--bg-alt));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	position: relative;
}

.tour-card__visual svg {
	width: 64px;
	height: 64px;
	opacity: 0.7;
}

.tour-card__visual::after {
	content: 'Photo à venir';
	position: absolute;
	bottom: 8px;
	right: 8px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	background: rgba(0,0,0,0.4);
	padding: 2px 8px;
	border-radius: var(--radius-pill);
}

.tour-card__body {
	padding: var(--space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.tour-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--text);
}

.tour-card__meta {
	display: flex;
	gap: var(--space-md);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.tour-card__meta span {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.tour-card__meta svg { width: 14px; height: 14px; color: var(--accent); }

.tour-card__text {
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
	font-size: var(--fs-sm);
	flex: 1;
}

.tour-card__price {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--accent);
	font-weight: 700;
	margin-top: auto;
}

.tour-card__price small {
	font-family: var(--font-body);
	font-size: 50%;
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: block;
}

/* ============================================
   USE CASES (MAD)
   ============================================ */

.usecase-list {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.usecase {
	padding: var(--space-lg);
	background: var(--bg-alt);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--accent);
}

.usecase__title {
	font-weight: 700;
	color: var(--text);
	margin-bottom: var(--space-xs);
	font-size: var(--fs-md);
}

.usecase__text {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

/* ============================================
   FAQ (réutilisable hors page médicale)
   ============================================ */

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.faq-item[open] { border-color: var(--accent); }

.faq-item summary {
	padding: var(--space-lg);
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--text);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
	content: '+';
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--accent);
	transition: transform var(--transition-base);
	flex-shrink: 0;
}

.faq-item[open] summary::after { content: '−'; }

.faq-item__answer {
	padding: 0 var(--space-lg) var(--space-lg);
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}