/* ═══════════════════════════════════════════════════════════════════════════
   BIG CITY — landing de l'application (bigcity.fr/app/)
   ───────────────────────────────────────────────────────────────────────────
   Page de présentation et de téléchargement de l'application Big City.
   Elle reprend le socle de `base.css` (polices, palette, en-tête, pied de
   page) et n'ajoute ici que ses propres blocs.

   RÈGLE DE COMPOSITION. Toutes les surfaces sont en « verre » (rgba blanc à
   très faible opacité) plutôt qu'en aplats opaques : sur un fond navy, un
   carton blanc franc découpe la page en morceaux, alors qu'une surface de
   verre laisse le halo du fond traverser et garde l'impression d'un seul
   document. Seul le mockup de téléphone fait exception — c'est un objet, il a
   le droit d'être opaque.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. RYTHME DE SECTION ───────────────────────── */

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section__head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head--center { margin-inline: auto; text-align: center; }

.section h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.section__lead {
	margin: 0;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	color: var(--ink-muted);
}

/* ─────────────────────────── 2. MOCKUP TÉLÉPHONE ───────────────────────── */
/* Un seul composant sert pour les captures fixes et pour la vidéo : cadre
 * navy très sombre, double liseré, encoche. Les proportions sont tenues par
 * un `aspect-ratio` pour que rien ne saute pendant le chargement du média. */

.phone {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	padding: 10px;
	background: #0b0f17;
	border-radius: 42px;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, .08),
		0 0 0 9px #161b24,
		0 30px 60px -20px rgba(0, 0, 0, .8);
}
.phone::before {           /* encoche */
	content: "";
	position: absolute;
	top: 16px; left: 50%;
	transform: translateX(-50%);
	width: 86px; height: 24px;
	background: #0b0f17;
	border-radius: 14px;
	z-index: 2;
}
.phone > img,
.phone > video {
	width: 100%;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	border-radius: 32px;
	background: #000;
}
.phone--lg { max-width: 330px; }

@media (max-width: 960px) { .phone { max-width: 260px; } }

/* ─────────────────────────── 3. HÉRO ───────────────────────────────────── */

.app-hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
	/* Halo vert en haut à gauche : il pose l'accent de la page avant même
	 * qu'on lise le titre. */
	background:
		radial-gradient(52rem 34rem at 8% -10%, rgba(0, 225, 124, .16), transparent 60%),
		radial-gradient(44rem 30rem at 95% 20%, rgba(176, 166, 223, .10), transparent 62%);
}
.app-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.app-hero h1 {
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	margin: 0 0 1.25rem;
}
.app-hero h1 .accent { color: var(--green); }
.app-hero__lead {
	max-width: 44ch;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: var(--ink-muted);
	margin-bottom: 2rem;
}

/* Badges et QR sur la même ligne. Le QR était dix sections plus bas, dans le
 * seul appel à l'action final : sur desktop, c'est-à-dire là où il sert, il
 * n'était visible qu'après avoir fait défiler toute la page. */
.app-hero__get {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2rem);
}
.app-hero__qr .qr img { width: 96px; height: 96px; }


@media (max-width: 860px) {
	.app-hero__grid { grid-template-columns: 1fr; }
	/* Le téléphone reste APRÈS le texte : mis en premier, il occupait tout
	 * le premier écran et repoussait le titre et les boutons de
	 * téléchargement sous la ligne de flottaison. */
	.app-hero__media { margin-top: 1rem; }
}
@media (max-width: 720px) {
	/* Le QR n'a aucun sens sur le téléphone qu'on tient déjà en main. */
	.app-hero__qr { display: none; }
}

/* ─────────────────────────── 4. BANDEAU VILLES ─────────────────────────── */

.cities {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
	padding: 1.15rem clamp(1.25rem, 3vw, 1.75rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.cities__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.cities__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
}
.city {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .95rem;
	font-size: .9rem;
	font-weight: 500;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}
.city::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.city--live  { color: var(--green);    border-color: rgba(0, 225, 124, .35); }
.city--soon  { color: var(--lavender); border-color: rgba(176, 166, 223, .32); }
.city small  { color: var(--ink-soft); font-weight: 400; }

/* ─────────────────────────── 5. ATOUTS ─────────────────────────────────── */

.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
}
.feature {
	padding: clamp(1.75rem, 2.5vw, 2.25rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform .3s var(--ease), background .3s var(--ease),
	            border-color .3s var(--ease);
}
.feature:hover {
	transform: translateY(-4px);
	background: var(--surface-2);
	border-color: var(--line-strong);
}
.feature__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	background: rgba(0, 225, 124, .14);
	color: var(--green);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.feature p { margin: 0; font-size: .95rem; color: var(--ink-muted); }

@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

/* ─────────────────────────── 6. SECTIONS EN DEUX COLONNES ──────────────── */

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.split--reverse .split__media { order: 2; }
.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.split p  { color: var(--ink-muted); }

/* Puces : la puce est un vrai nœud flex, pas un ::before absolu — impossible
 * qu'elle chevauche le texte, et le retrait reste net sur deux lignes. */
.split__points { list-style: none; margin: 1.5rem 0 0; }
.split__points li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .45rem 0;
	color: var(--ink-muted);
}
.split__points li::before {
	content: "";
	flex-shrink: 0;
	width: 7px; height: 7px;
	margin-top: .6rem;
	border-radius: 50%;
	background: var(--green);
}

.split__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.25rem;
	padding: .7rem 1.15rem;
	font-size: .88rem;
	font-weight: 700;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.split__cta:hover { background: var(--surface-2); border-color: var(--cream); }
.split__cta svg { width: 15px; height: 15px; }

/* Les deux commandes de l'aperçu vidéo, côte à côte sous le mockup. */
.split__media-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
}
.split__media-actions .split__cta { margin-top: 1.25rem; }
button.split__cta {
	background: transparent;
	color: inherit;
	font-family: var(--font-body);
	font-size: .88rem;
	cursor: pointer;
}

/* Étiquettes de catégories de lieux */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1.5rem 0 0;
	list-style: none;
}
.tags li {
	padding: .35rem .8rem;
	font-size: .82rem;
	color: var(--ink-muted);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}

.soon {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin: 1.5rem 0 0;
	padding: .85rem 1.1rem;
	font-size: .9rem;
	background: rgba(176, 166, 223, .10);
	border: 1px solid rgba(176, 166, 223, .28);
	border-radius: var(--radius);
	color: var(--ink-muted);
}
.soon strong {
	flex-shrink: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lavender);
}

@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse .split__media { order: 0; }
}

/* ─────────────────────────── 7. GALERIE D'ÉCRANS ───────────────────────── */
/* Défilement horizontal natif (donc utilisable au doigt, à la molette et au
 * clavier), avec accroche par élément. Le JS n'ajoute que le glisser-déposer
 * à la souris — sans lui, la galerie reste parfaitement utilisable. */

.showcase__track {
	display: flex;
	gap: 1rem;
	padding-bottom: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--scroll-thumb) transparent;
	/* Marges négatives + padding : les vignettes peuvent défiler jusqu'au bord
	 * de l'écran sur mobile au lieu de s'arrêter dans la gouttière. */
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	cursor: grab;
}
.showcase__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.showcase__track::-webkit-scrollbar { height: 6px; }
.showcase__track::-webkit-scrollbar-thumb {
	/* --scroll-thumb et non --line-strong : ici la forme colorée est la seule
	 * information de position, elle relève du seuil non textuel de 3:1
	 * (2,00:1 avec --line-strong, 3,99:1 avec --scroll-thumb). */
	background: var(--scroll-thumb);
	border-radius: 3px;
}
/* La piste est une vraie <ul> : c'est l'élément de liste qui porte le
 * dimensionnement flex, l'image se contente de le remplir. */
.showcase__track { list-style: none; }
.showcase__track li {
	flex: 0 0 auto;
	width: clamp(160px, 22vw, 230px);
	scroll-snap-align: center;
}
.showcase__track img {
	width: 100%;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	border-radius: 20px;
	border: 1px solid var(--line);
	/* Empêche le navigateur d'interpréter le glisser comme un drag d'image. */
	-webkit-user-drag: none;
	user-select: none;
}
.showcase__hint {
	margin: 0;
	font-size: .82rem;
	color: var(--ink-soft);
}

/* ─────────────────────────── 8. FAQ ────────────────────────────────────── */

.faq { display: grid; gap: .6rem; }
.faq details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq details[open] { background: var(--surface-2); border-color: var(--line-strong); }
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	font-size: 1.02rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron dessiné en CSS : deux traits qui pivotent à l'ouverture. Un signe
 * « + » qui devient « − » serait ambigu à côté d'un titre déjà cliquable. */
.faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px; height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--green);
	border-bottom: 2px solid var(--green);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > p {
	margin: 0;
	padding: 0 1.4rem 1.35rem;
	font-size: .95rem;
	color: var(--ink-muted);
}

/* ─────────────────────────── 9. APPEL À L'ACTION FINAL ────────────────── */

.cta-final {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	text-align: center;
	background:
		radial-gradient(40rem 24rem at 50% 0%, rgba(0, 225, 124, .14), transparent 65%),
		var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.cta-final h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.cta-final > p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--ink-muted);
}
.cta-final__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 2.25rem;
}
.qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}
.qr svg, .qr img {
	width: 108px; height: 108px;
	padding: 8px;
	background: #fff;
	border-radius: 14px;
}
.qr__text { font-size: .78rem; color: var(--ink-soft); }

/* Le QR n'a aucun sens sur le téléphone qu'on tient déjà en main : on le
 * masque sous 720 px, les badges suffisent. */
@media (max-width: 720px) { .qr { display: none; } }

/* ─────────────────────────── 10. APPARITION AU DÉFILEMENT ─────────────── */
/* Progressive enhancement : l'opacité n'est réduite QUE si le JS a posé
 * `js-reveal` sur <html>. Sans JS (ou si le script échoue), rien n'est
 * jamais masqué. */

.js-reveal .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────── 11. CIBLES D'ANCRE ────────────────────────── */
/* L'en-tête est collant : sans marge de défilement, un saut vers #atouts,
 * #ecrans ou #faq amènerait le titre de section SOUS l'en-tête.
 *
 * Ces dix identifiants ne couvrent QUE les sauts d'ancre. Le focus clavier,
 * lui, peut atterrir sur n'importe quel élément interactif : c'est la règle
 * `:where(a, button, summary…)` de base.css qui l'en protège (WCAG 2.4.11).
 * Les deux se complètent, la spécificité de celle-ci l'emporte ici. */
#villes, #atouts, #agenda, #ecrans, #carte, #lieux, #faq,
#telecharger, #contenu {
	scroll-margin-top: 88px;
}