/* ==========================================================================
   Page d'entrée — double univers
   ========================================================================== */

body.u-gateway { overflow: hidden; background: #000; }

.gw {
	--split: 50%;
	position: fixed; inset: 0;
	display: flex;
	height: 100vh; height: 100svh;
	overflow: hidden;
}

.gw__side {
	position: relative; flex: 1 1 0; min-width: 0;
	overflow: hidden; isolation: isolate;
	display: flex; align-items: flex-end;
	padding: clamp(24px, 5vw, 80px);
	padding-bottom: clamp(70px, 9vh, 110px);
	transition: flex-grow 1.1s var(--ease);
	cursor: pointer;
}
.gw.is-corporate .gw__side--corporate,
.gw.is-cinema .gw__side--cinema { flex-grow: 1.75; }

.gw__media { position: absolute; inset: -4%; z-index: -3; transition: transform 1.4s var(--ease-out), filter 1s, translate 1.2s var(--ease-out); }
.gw__img, .gw__video { width: 100%; height: 100%; object-fit: cover; }
.gw__veil { position: absolute; inset: 0; z-index: -2; transition: opacity .9s; }

/* -- Corporate (clair) -- */
.gw__side--corporate { background: var(--corp-bg); color: var(--corp-ink); }
.gw__side--corporate .gw__media { filter: saturate(.85) contrast(.95); }
.gw__side--corporate .gw__veil {
	background:
		linear-gradient(180deg, rgba(245, 243, 238, .2) 0%, rgba(245, 243, 238, .05) 35%, rgba(245, 243, 238, .92) 78%, var(--corp-bg) 100%),
		linear-gradient(90deg, rgba(245, 243, 238, .55), transparent 60%);
}
.gw__lines { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: space-evenly; pointer-events: none; }
.gw__lines span { width: 1px; height: 100%; background: rgba(18, 20, 23, .07); transform-origin: top; animation: gw-line 1.6s var(--ease) both; }
.gw__lines span:nth-child(2) { animation-delay: .1s; }
.gw__lines span:nth-child(3) { animation-delay: .2s; }
@keyframes gw-line { from { transform: scaleY(0); } }

/* -- Cinéma (sombre) -- */
.gw__side--cinema { background: var(--cine-bg); color: var(--cine-ink); }
.gw__side--cinema .gw__media { filter: grayscale(.4) contrast(1.15) brightness(.55); }
.gw__side--cinema .gw__veil {
	background:
		radial-gradient(120% 70% at 70% 110%, rgba(0, 185, 242, .45), transparent 60%),
		radial-gradient(80% 60% at 0% 0%, rgba(92, 242, 255, .14), transparent 60%),
		linear-gradient(180deg, rgba(5, 6, 8, .2), rgba(5, 6, 8, .35) 45%, rgba(5, 6, 8, .95) 100%);
}
.gw__side--cinema::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.gw__stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

.gw__hud { position: absolute; inset: 78px clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px); pointer-events: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: rgba(236, 235, 230, .7); }
.hud-c { position: absolute; width: 22px; height: 22px; border-color: rgba(236, 235, 230, .55); border-style: solid; border-width: 0; }
.hud-c--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud-c--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud-c--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud-c--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.gw__rec { position: absolute; top: 4px; right: 36px; display: flex; align-items: center; gap: 8px; }
.gw__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 10px #ff2d2d; animation: pulse 1.2s infinite; }
.gw__coords { position: absolute; bottom: 4px; right: 36px; }
.gw__tc { position: absolute; top: 4px; left: 36px; }

/* -- Contenu -- */
.gw__content { position: relative; max-width: 560px; transition: opacity .7s, transform 1s var(--ease-out); }
.gw__kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.gw__title { line-height: .9; margin-bottom: 22px; padding-top: .14em; } /* place pour les accents (É) sous le sur-titre */
.gw__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.gw__tags li { font-size: 12px; padding: 6px 12px; border-radius: 99px; border: 1px solid currentColor; opacity: .7; }
.gw__btn { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 10px 0 26px; border-radius: 99px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transition: gap .5s var(--ease-out), background-color .4s, color .4s; }
.gw__btn .icon { width: 36px; height: 36px; padding: 9px; border-radius: 50%; }
.gw.is-ready .gw__side:hover .gw__btn { gap: 30px; }

.gw__side--corporate .gw__title { color: #333; font-family: var(--f-sans); font-weight: 600; font-size: clamp(52px, 7.6vw, 128px); letter-spacing: -.055em; margin-left: -.03em; } /* compense l'approche du « C » : aligné optiquement */
.gw__side--corporate .gw__title em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.02em; color: var(--corp-accent); }
/* Sur-titre corporate : pastille claire, lisible quelle que soit la photo */
.gw__side--corporate .gw__kicker {
	display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 99px;
	background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px -12px rgba(18, 20, 23, .35); color: var(--corp-ink); letter-spacing: .14em;
}
.gw__side--corporate .gw__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--corp-accent); flex: none; }
/* Le contenu corporate démarre après le badge central */
/* (marge sur le contenu, pas sur le côté : un padding asymétrique fausse le partage 50/50 des flex) */
@media (min-width: 821px) { .gw__side--corporate .gw__content { margin-left: calc(clamp(65px, 6.5vw, 95px) + 48px - clamp(24px, 5vw, 80px)); } }
.gw__side--corporate .gw__btn { background: var(--corp-ink); color: var(--corp-bg); }
.gw__side--corporate .gw__btn .icon { background: var(--corp-accent); color: #fff; }

.gw__side--cinema .gw__title { font-family: var(--f-display); font-weight: 900; font-size: clamp(64px, 10vw, 170px); text-transform: uppercase; letter-spacing: -.01em; line-height: .82; text-shadow: 0 0 40px rgba(0, 185, 242, .35); margin-left: -.035em; } /* aligné optiquement */
.gw__side--cinema .gw__title em { font-style: normal; color: var(--cine-accent); }
.gw__side--cinema .gw__kicker { font-family: var(--f-mono); font-weight: 500; color: var(--cine-accent); }
.gw__side--cinema .gw__tags li { font-family: var(--f-mono); border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.gw__side--cinema .gw__btn { border: 1px solid var(--cine-accent); color: var(--cine-ink); border-radius: 0; font-family: var(--f-mono); font-weight: 500; }
.gw__side--cinema .gw__btn .icon { background: var(--cine-accent); color: #000; border-radius: 0; }
.gw.is-ready .gw__side--cinema:hover .gw__btn { background: var(--cine-accent); color: #000; }

/* Côté non survolé : estompé */
.gw.is-corporate .gw__side--cinema .gw__content,
.gw.is-cinema .gw__side--corporate .gw__content { opacity: .25; transform: translateY(14px); }
.gw.is-cinema .gw__side--corporate .gw__media { filter: saturate(0) contrast(.9) blur(2px); }
.gw.is-corporate .gw__side--cinema .gw__media { filter: grayscale(1) brightness(.3) blur(2px); }
.gw.is-ready .gw__side:hover .gw__media { transform: scale(1.04); }

/* Badge central */
.gw__center {
	position: absolute; top: 50%; left: var(--split); z-index: 10;
	transform: translate(-50%, -50%);
	transition: left 1.1s var(--ease);
	pointer-events: none;
}
.gw__badge { position: relative; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.gw__badge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, var(--cine-bg) 50%, var(--corp-bg) 50%); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.gw__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.gw__ring text { font-family: var(--f-mono); font-size: 11.5px; fill: #888; } /* espacement réparti par textLength : jamais de chevauchement */
.gw__logo { position: relative; width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(90deg, var(--cine-accent) 50%, var(--corp-ink) 50%); color: #fff; }
.gw__logo .icon { width: 56%; height: 56%; stroke-width: 2; }
@keyframes spin { to { transform: rotate(360deg); } }

.gw__topbar {
	position: absolute; top: 0; left: 0; right: 0; z-index: 11;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 26px clamp(24px, 5vw, 80px); pointer-events: none;
	font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.gw__brand { color: var(--cine-ink); display: inline-flex; }
.gw__brand :is(.logo__img, .logo__svg) { height: clamp(24px, 2.2vw, 32px); width: auto; }
.gw__baseline { color: var(--corp-ink); opacity: .7; font-family: var(--f-mono); font-size: 11px; text-align: right; }

.gw__hint {
	position: absolute; bottom: 24px; left: var(--split); z-index: 11;
	transform: translateX(-50%); transition: left 1.1s var(--ease), opacity .5s;
	font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: #fff; mix-blend-mode: difference; white-space: nowrap; pointer-events: none;
}
.gw__hint span { display: inline-block; animation: nudge 1.6s var(--ease) infinite; }
.gw__hint span:last-child { animation-direction: reverse; }
@keyframes nudge { 50% { transform: translateX(-5px); } }
.gw.is-corporate .gw__hint, .gw.is-cinema .gw__hint { opacity: 0; }

/* Entrée */
.gw__side .gw__content > * { animation: gw-in 1.2s var(--ease-out) both; }
.gw__side .gw__content > *:nth-child(2) { animation-delay: .1s; }
.gw__side .gw__content > *:nth-child(3) { animation-delay: .18s; }
.gw__side .gw__content > *:nth-child(4) { animation-delay: .26s; }
.gw__side .gw__content > *:nth-child(5) { animation-delay: .34s; }
.gw__side .gw__content > *:nth-child(6) { animation-delay: .42s; }
@keyframes gw-in { from { opacity: 0; transform: translateY(40px); } }
.gw__center { animation: gw-badge 1.4s var(--ease-out) .3s both; }
@keyframes gw-badge { from { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-40deg); } }

/* Choix effectué : le côté s'étend en plein écran */
.gw.is-going .gw__center, .gw.is-going .gw__topbar, .gw.is-going .gw__hint { opacity: 0; transition: opacity .4s; }
.gw.is-going-corporate .gw__side--corporate,
.gw.is-going-cinema .gw__side--cinema { flex-grow: 1000; }
.gw.is-going .gw__content { opacity: 0; transform: translateY(-20px); }

/* Mobile : empilé */
@media (max-width: 820px) {
	.gw { flex-direction: column; }
	/* 50/50 strict : mêmes marges sur les deux moitiés (la place du logo en haut compte dans la hauteur). */
	.gw__side { padding: 76px 22px 26px; min-height: 0; }
	.gw__tags { display: none; }
	.gw__kicker { margin-bottom: 10px; font-size: 10px; }
	.gw__title { margin-bottom: 16px; }
	.gw__side--corporate .gw__title { font-size: clamp(44px, 13vw, 72px); }
	.gw__side--cinema .gw__title { font-size: clamp(56px, 17vw, 96px); }
	.gw__btn { height: 46px; padding-left: 18px; font-size: 12px; }
	.gw__btn .icon { width: 30px; height: 30px; padding: 7px; }
	.gw__center { left: auto; right: 18px; top: var(--split); transform: translateY(-50%); transition: top 1.1s var(--ease); }
	.gw__badge { width: 104px; }
	.gw__badge::before { background: linear-gradient(180deg, var(--cine-bg) 50%, var(--corp-bg) 50%); }
	.gw__logo { background: linear-gradient(180deg, var(--cine-accent) 50%, var(--corp-ink) 50%); }
	@keyframes gw-badge { from { opacity: 0; transform: translateY(-50%) scale(.6); } }
	.gw__topbar { padding: 20px 22px; }
	.gw__baseline, .gw__hint { display: none; }
	.gw__hud { font-size: 9px; }
	.gw__coords { display: none; }
}

/* Téléphones bas (iPhone SE…) : on resserre pour que tout tienne dans chaque moitié. */
@media (max-width: 820px) and (max-height: 740px) {
	.gw__side { padding-top: 64px; padding-bottom: 20px; }
	.gw__side--cinema .gw__title { font-size: clamp(48px, 14vw, 80px); }
	.gw__side--corporate .gw__title { font-size: clamp(40px, 11vw, 64px); }
	.gw__title { margin-bottom: 12px; }
	.gw__btn { height: 42px; }
}