/* ==========================================================================
   Page Globtel — sélection des 5 forfaits (fidèle à la maquette Claude
   Design "Forfaits Globtel v2"). Isolé à cette page : chargé uniquement
   quand is_page( 'globtel' ) (voir functions.php).
   ========================================================================== */

.globtel-page {
	--globtel-container: 1656px;
	--globtel-gutter: clamp(24px, 5vw, 96px);
	/* Largeur de contenu (hors marge) : identique pour le texte (padding)
	   et pour la zone des cartes (positionnées en absolute, donc non
	   affectées par le padding — voir .globtel-cards). */
	--globtel-content-width: min(calc(100% - 2 * var(--globtel-gutter)), calc(var(--globtel-container) - 2 * var(--globtel-gutter)));
	--globtel-gold: var(--universim-gold, #f5b301);
	--globtel-gold-bright: #ffe08a;
	background: var(--universim-black, #000);
	color: #fff;
	font-family: 'Sora', 'Poppins', 'Segoe UI', Arial, sans-serif;
	overflow-x: hidden;
}

.globtel-page a {
	color: inherit;
}

.globtel-page .globtel-mono {
	font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.globtel-hero {
	max-width: var(--globtel-container);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 92px) var(--globtel-gutter) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.globtel-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 11px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--globtel-gold) 85%, white 0%);
	margin-bottom: clamp(18px, 2.4vw, 30px);
}

.globtel-hero__eyebrow-line {
	display: block;
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--globtel-gold) 75%, transparent), transparent);
}

.globtel-hero__title {
	margin: 0;
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
	font-size: clamp(44px, 6.6vw, 116px);
	font-weight: 200;
	line-height: .94;
	letter-spacing: -.015em;
}

.globtel-hero__title-line {
	display: block;
	color: rgba(255, 255, 255, .94);
}

.globtel-hero__title-line--accent {
	font-weight: 400;
	letter-spacing: .035em;
	background: linear-gradient(180deg, #FFE7A6 0%, var(--globtel-gold) 50%, #B0700C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.globtel-hero__aside {
	max-width: 360px;
	text-align: right;
	padding-bottom: 14px;
}

.globtel-hero__subtitle {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 26px);
	font-weight: 200;
	line-height: 1.35;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .58);
}

.globtel-hero__count {
	margin-top: 26px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 10px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .34);
}

.globtel-hero__count-line {
	display: block;
	width: 40px;
	height: 1px;
	background: color-mix(in srgb, var(--globtel-gold) 50%, transparent);
}

/* --------------------------------------------------------------------
   Stage (carte du monde + cartes forfaits)
   -------------------------------------------------------------------- */
.globtel-stage {
	position: relative;
	margin-top: clamp(64px, 9vw, 168px);
}

.globtel-map-band {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	/* z-index (même à 0) crée un contexte d'empilement propre à ce layer :
	   le z-index de ses ::before/::after (fondu) reste ainsi confiné à la
	   map et ne peut jamais passer devant .globtel-cards (voir plus bas). */
	isolation: isolate;
}

.globtel-map-band::before,
.globtel-map-band::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 18%;
	pointer-events: none;
	z-index: 1;
}

.globtel-map-band::before {
	top: 0;
	background: linear-gradient(180deg, #000 0%, transparent 100%);
}

.globtel-map-band::after {
	bottom: 0;
	background: linear-gradient(0deg, #000 0%, transparent 100%);
}

.globtel-map-band__img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 145%;
	max-width: 2400px;
	aspect-ratio: 2 / 1;
	height: auto;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 1.4s ease;
	-webkit-mask-image: linear-gradient(90deg,
		rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 4%, rgba(0, 0, 0, .14) 8%,
		rgba(0, 0, 0, .3) 13%, rgba(0, 0, 0, .52) 19%, rgba(0, 0, 0, .78) 25%,
		#000 31%, #000 69%, rgba(0, 0, 0, .78) 75%, rgba(0, 0, 0, .52) 81%,
		rgba(0, 0, 0, .3) 87%, rgba(0, 0, 0, .14) 92%, rgba(0, 0, 0, .05) 96%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg,
		rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 4%, rgba(0, 0, 0, .14) 8%,
		rgba(0, 0, 0, .3) 13%, rgba(0, 0, 0, .52) 19%, rgba(0, 0, 0, .78) 25%,
		#000 31%, #000 69%, rgba(0, 0, 0, .78) 75%, rgba(0, 0, 0, .52) 81%,
		rgba(0, 0, 0, .3) 87%, rgba(0, 0, 0, .14) 92%, rgba(0, 0, 0, .05) 96%, rgba(0, 0, 0, 0) 100%);
}

.globtel-map-band__img.is-loaded {
	opacity: .78;
}

.globtel-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.globtel-lines__paths {
	fill: none;
	stroke: var(--globtel-gold);
	stroke-width: 1.4;
	stroke-dasharray: 2 7;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--globtel-gold) 65%, transparent));
	animation: globtel-signal 9s linear infinite;
}

.globtel-lines__dots {
	fill: var(--globtel-gold);
	filter: drop-shadow(0 0 9px color-mix(in srgb, var(--globtel-gold) 88%, transparent));
}

.globtel-lines__pulses circle {
	fill: none;
	stroke: var(--globtel-gold);
	stroke-width: 1;
	opacity: .7;
	transform-box: fill-box;
	transform-origin: center;
	animation: globtel-pulse-ring 3.4s ease-out infinite;
}

.globtel-cards {
	position: relative;
	z-index: 2;
	width: var(--globtel-content-width);
	margin: 0 auto;
}

/* --------------------------------------------------------------------
   Cartes forfaits
   -------------------------------------------------------------------- */
.globtel-card {
	position: relative;
	display: flex;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .56) 0%, rgba(0, 0, 0, .32) 55%, rgba(0, 0, 0, .48) 100%);
	border: 1px solid color-mix(in srgb, var(--globtel-gold) 35%, transparent);
	box-shadow: 0 0 26px -8px color-mix(in srgb, var(--globtel-gold) 16%, transparent), inset 0 0 46px rgba(0, 0, 0, .4);
	backdrop-filter: blur(6px) saturate(.9);
	-webkit-backdrop-filter: blur(6px) saturate(.9);
	transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
	animation: globtel-drift 12s ease-in-out infinite;
}

.globtel-card:hover,
.globtel-card:focus-visible {
	transform: translateY(-8px);
	border-color: var(--globtel-gold);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--globtel-gold) 28%, transparent),
		0 0 40px -6px color-mix(in srgb, var(--globtel-gold) 35%, transparent),
		0 26px 70px -26px color-mix(in srgb, var(--globtel-gold) 50%, transparent),
		inset 0 0 70px rgba(0, 0, 0, .7);
}

.globtel-card:hover .globtel-card__glow,
.globtel-card:focus-visible .globtel-card__glow {
	opacity: 1;
}

.globtel-card__corner {
	position: absolute;
	background: var(--globtel-gold);
}

.globtel-card__corner--tl {
	top: -1px;
	left: -1px;
	width: 16px;
	height: 1px;
}

.globtel-card__corner--tl::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 16px;
	background: var(--globtel-gold);
}

.globtel-card--max .globtel-card__corner--tl {
	width: 20px;
}

.globtel-card--max .globtel-card__corner--tl::after {
	height: 20px;
}

.globtel-card__corner--br {
	bottom: -1px;
	right: -1px;
	width: 20px;
	height: 1px;
}

.globtel-card__corner--br::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 20px;
	background: var(--globtel-gold);
}

.globtel-card__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(70% 60% at 30% 100%, color-mix(in srgb, var(--globtel-gold) 16%, transparent), transparent 70%);
}

.globtel-card__inner {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(18px, 2vw, 30px);
	padding: clamp(20px, 2vw, 34px);
}

/* La carte MAX est volontairement plus grande : même grille (padding du
   bloc + espace label -> contenu), simplement mise à l'échelle pour
   rester proportionnée à sa taille — voir .globtel-card--max plus bas. */
.globtel-card--max .globtel-card__inner {
	gap: clamp(24px, 2.6vw, 40px);
	padding: clamp(26px, 2.6vw, 44px);
}

.globtel-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 10px;
	letter-spacing: .4em;
	color: color-mix(in srgb, var(--globtel-gold) 85%, white 0%);
}

.globtel-card--max .globtel-card__top {
	align-items: flex-start;
}

.globtel-card__index {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, .5);
	letter-spacing: .26em;
}

.globtel-card__badge {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .26em;
	color: color-mix(in srgb, var(--globtel-gold) 95%, white 0%);
	border: 1px solid color-mix(in srgb, var(--globtel-gold) 45%, transparent);
	padding: 7px 14px;
}

.globtel-card__name {
	display: block;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 200;
	line-height: 1;
}

.globtel-card__value {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.globtel-card__value-number {
	font-size: clamp(38px, 4.6vw, 64px);
	font-weight: 200;
	line-height: .9;
	letter-spacing: -.03em;
}

.globtel-card--3 .globtel-card__value-number { font-size: clamp(36px, 4.4vw, 62px); }
.globtel-card--4 .globtel-card__value-number { font-size: clamp(42px, 5.2vw, 74px); }
.globtel-card--max .globtel-card__value-number { font-size: clamp(56px, 7vw, 104px); }

.globtel-card__value-unit {
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 300;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .7);
}

.globtel-card--max .globtel-card__value-unit {
	font-size: clamp(17px, 1.6vw, 24px);
}

.globtel-card__cta {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .86);
	transition: color .4s ease;
}

.globtel-card__arrow {
	font-size: 17px;
	font-weight: 500;
	color: var(--globtel-gold);
	text-shadow: 0 0 8px color-mix(in srgb, var(--globtel-gold) 55%, transparent);
	transition: color .4s ease, transform .4s ease, text-shadow .4s ease;
}

.globtel-card:hover .globtel-card__cta,
.globtel-card:focus-visible .globtel-card__cta {
	color: #fff;
}

.globtel-card:hover .globtel-card__arrow,
.globtel-card:focus-visible .globtel-card__arrow {
	color: var(--globtel-gold-bright);
	text-shadow: 0 0 10px color-mix(in srgb, var(--globtel-gold-bright) 70%, transparent);
	transform: translateX(3px);
}

/* --------------------------------------------------------------------
   Ligne d'information (bas de stage)
   -------------------------------------------------------------------- */
.globtel-footer-row {
	max-width: var(--globtel-container);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 30px) var(--globtel-gutter) clamp(48px, 6vw, 84px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .32);
}

.globtel-footer-row__accent {
	color: color-mix(in srgb, var(--globtel-gold) 70%, transparent);
}

/* --------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------- */
@keyframes globtel-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -12px, 0); }
}

.globtel-card:hover,
.globtel-card:focus-visible {
	animation-play-state: paused;
}

@keyframes globtel-signal {
	to { stroke-dashoffset: -220; }
}

@keyframes globtel-pulse-ring {
	0% { transform: scale(.5); opacity: .85; }
	100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.globtel-card,
	.globtel-lines__paths,
	.globtel-lines__pulses circle {
		animation: none !important;
	}

	.globtel-card,
	.globtel-map-band__img {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------
   Mobile (par défaut) — cartes empilées, bande de carte réduite.
   -------------------------------------------------------------------- */
.globtel-cards {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: 8px;
	padding-bottom: clamp(32px, 6vw, 56px);
}

.globtel-stage {
	min-height: 340px;
}

.globtel-map-band {
	height: 360px;
}

.globtel-lines {
	display: none;
}

/* --------------------------------------------------------------------
   Tablette (900px+) — grille 2 colonnes, la carte MAX prend toute la largeur.
   -------------------------------------------------------------------- */
@media (min-width: 900px) {
	.globtel-map-band {
		height: 460px;
	}

	.globtel-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
		padding-top: 40px;
	}

	.globtel-card--max {
		grid-column: 1 / -1;
	}

	.globtel-card__inner {
		min-height: 200px;
	}

	.globtel-card--max .globtel-card__inner {
		min-height: 240px;
	}
}

/* --------------------------------------------------------------------
   Desktop (1200px+) — disposition asymétrique fidèle à la maquette.
   -------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.globtel-stage {
		min-height: 0;
	}

	.globtel-map-band {
		height: auto;
	}

	.globtel-lines {
		display: block;
		width: var(--globtel-content-width);
		margin: 0 auto;
	}

	.globtel-cards {
		display: block;
		position: relative;
		aspect-ratio: 1656 / 880;
		padding-top: 0;
		padding-bottom: 0;
	}

	.globtel-card {
		position: absolute;
	}

	.globtel-card__inner {
		height: 100%;
	}

	.globtel-card--1 { left: 1.45%; top: 6.82%; width: 17.87%; height: 23.86%; animation: globtel-drift 11s ease-in-out infinite; }
	.globtel-card--2 { left: 9.06%; top: 44.55%; width: 18.96%; height: 26.82%; animation: globtel-drift 13s ease-in-out 1.5s infinite; }
	.globtel-card--3 { left: 35.99%; top: 5%; width: 18.36%; height: 25.68%; animation: globtel-drift 12s ease-in-out .8s infinite; }
	.globtel-card--4 { left: 42.27%; top: 56.36%; width: 20.05%; height: 29.09%; animation: globtel-drift 14s ease-in-out 2.2s infinite; }
	.globtel-card--max { left: 71.01%; top: 24.55%; width: 23.91%; height: 39.09%; animation: globtel-drift 15s ease-in-out .4s infinite; }
}