/* Thème sombre (par défaut) */
:root {
	color-scheme: dark;
	--bg: #0E0A14;
	--bg-0: rgba(14,10,20,0);
	--text: #fff;
	--mute: rgba(255,255,255,.66);
	--faint: rgba(255,255,255,.45);
	--glass: rgba(255,255,255,.07);
	--glass-hover: rgba(255,255,255,.14);
	--line: rgba(255,255,255,.14);
	--sep: rgba(255,255,255,.08);
	--panel: rgba(26,16,30,.92);
	--nav: rgba(30,18,34,.62);
	--nav-mute: rgba(255,255,255,.6);
	--nav-active: rgba(255,255,255,.14);
	--pill-on: #fff;
	--pill-on-text: #0E0A14;
	--accent: #FF9EE0;
	--accent-soft: #FFC4EC;
	--tint: rgba(244,92,214,.18);
	--tint-line: rgba(255,158,224,.45);
	--halo-1: rgba(244,92,214,.45);
	--halo-2: rgba(181,123,255,.32);
	--halo-3: rgba(255,139,167,.32);
	--photo: linear-gradient(165deg, #4A1F45 0%, #24122A 55%, #120A16 100%);
	--lead: linear-gradient(150deg, #5A2350 0%, #2A1430 50%, #140A18 100%);
	--lead-text: #fff;
	--scrim: rgba(8,4,12,.6);
	--toast: rgba(40,22,44,.94);
	--shadow: rgba(0,0,0,.5);
	--disabled: .45;
	--theme-icon-sun: block;
	--theme-icon-moon: none;
}
/* Thème clair : suit le téléphone, sauf choix manuel */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--bg: #F7F3F8; --bg-0: rgba(247,243,248,0); --text: #16121C; --mute: rgba(22,18,28,.62); --faint: rgba(22,18,28,.45);
		--glass: rgba(255,255,255,.72); --glass-hover: #fff; --line: rgba(22,18,28,.09); --sep: rgba(22,18,28,.07);
		--panel: rgba(255,255,255,.94); --nav: rgba(255,255,255,.8); --nav-mute: rgba(22,18,28,.5); --nav-active: rgba(22,18,28,.07);
		--pill-on: #16121C; --pill-on-text: #fff; --accent: #B8158F; --accent-soft: #9C0F79; --tint: rgba(244,92,214,.12); --tint-line: rgba(184,21,143,.3);
		--halo-1: rgba(244,92,214,.28); --halo-2: rgba(181,123,255,.26); --halo-3: rgba(255,170,140,.32);
		--photo: linear-gradient(165deg, #F6B9DE 0%, #D58AC9 50%, #7E4C8F 100%); --lead: linear-gradient(150deg, #FFE0F3 0%, #F7C4E8 50%, #E9C2F7 100%); --lead-text: #16121C;
		--scrim: rgba(60,30,60,.3); --toast: rgba(255,255,255,.96); --shadow: rgba(120,60,120,.2); --disabled: .55;
		--theme-icon-sun: none; --theme-icon-moon: block;
	}
}
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #F7F3F8; --bg-0: rgba(247,243,248,0); --text: #16121C; --mute: rgba(22,18,28,.62); --faint: rgba(22,18,28,.45);
	--glass: rgba(255,255,255,.72); --glass-hover: #fff; --line: rgba(22,18,28,.09); --sep: rgba(22,18,28,.07);
	--panel: rgba(255,255,255,.94); --nav: rgba(255,255,255,.8); --nav-mute: rgba(22,18,28,.5); --nav-active: rgba(22,18,28,.07);
	--pill-on: #16121C; --pill-on-text: #fff; --accent: #B8158F; --accent-soft: #9C0F79; --tint: rgba(244,92,214,.12); --tint-line: rgba(184,21,143,.3);
	--halo-1: rgba(244,92,214,.28); --halo-2: rgba(181,123,255,.26); --halo-3: rgba(255,170,140,.32);
	--photo: linear-gradient(165deg, #F6B9DE 0%, #D58AC9 50%, #7E4C8F 100%); --lead: linear-gradient(150deg, #FFE0F3 0%, #F7C4E8 50%, #E9C2F7 100%); --lead-text: #16121C;
	--scrim: rgba(60,30,60,.3); --toast: rgba(255,255,255,.96); --shadow: rgba(120,60,120,.2); --disabled: .55;
	--theme-icon-sun: none; --theme-icon-moon: block;
}
/* Commun aux deux thèmes */
:root {
	--pink: #F45CD6;
	--on-photo-accent: #FFB8EC;
	--glass-dark: rgba(20,12,24,.42);
	--grad: linear-gradient(110deg, #FF8BA7 0%, #F45CD6 50%, #B57BFF 100%);
	--grad-round: linear-gradient(140deg, #FF8BA7 0%, #F45CD6 50%, #A86BFF 100%);
	--grad-text: linear-gradient(90deg, #FF8BA7 0%, #F45CD6 55%, #B57BFF 100%);
	--glow: 0 12px 32px rgba(244,92,214,.5), inset 0 1px 0 rgba(255,255,255,.45);
	--safe-b: env(safe-area-inset-bottom);
	--safe-t: env(safe-area-inset-top);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html.locked, html.locked body { overflow: hidden; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 400 15px/1.4 Outfit, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
h1, h2, p { margin: 0; }

/* Halos de fond */
.halos { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
	radial-gradient(420px 420px at 0% 0%, var(--halo-1), transparent 65%),
	radial-gradient(380px 380px at 100% 45%, var(--halo-2), transparent 65%),
	radial-gradient(520px 340px at 30% 100%, var(--halo-3), transparent 65%); }

/* Éléments communs */
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 24px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass-btn { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; transition: background .15s; }
.glass-btn svg { width: 19px; height: 19px; stroke-width: 2; }
.glass-btn.lg { width: 54px; height: 54px; }
.glass-btn:hover { background: var(--glass-hover); }
/* Boutons posés sur une photo : toujours verre sombre */
.glass-btn.sm, .fiche-bar .glass-btn { width: 40px; height: 40px; background: var(--glass-dark); border-color: rgba(255,255,255,.2); color: #fff; }
.fiche-bar .glass-btn { width: 44px; height: 44px; }
.glass-btn.sm:hover, .fiche-bar .glass-btn:hover { background: rgba(20,12,24,.62); }

.cta { height: 54px; padding: 0 7px 0 22px; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: var(--glow); transition: transform .15s, box-shadow .15s, opacity .15s; }
.cta i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.24); display: grid; place-items: center; }
.cta span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta svg { width: 18px; height: 18px; stroke-width: 2.4; }
.cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(244,92,214,.65), inset 0 1px 0 rgba(255,255,255,.45); }
.cta:active:not(:disabled) { transform: scale(.98); }
.cta:disabled { opacity: var(--disabled); box-shadow: none; cursor: default; }
.cta.picked { background: var(--glass); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--pink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cta.picked i { background: var(--tint); color: var(--accent); }

.seg { padding: 4px; border-radius: 999px; background: var(--glass-dark); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; color: #fff; }
.seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 500; }
.seg button.on { background: rgba(255,255,255,.94); color: #16121C; font-weight: 600; }
.i-bikini, .alt .i-dress { display: none; }
.alt .i-bikini { display: block; }

.pill { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill.on { background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-text); font-weight: 600; }

/* Mise en page */
.app { max-width: 1480px; margin: 0 auto; padding-bottom: calc(110px + var(--safe-b)); }
.topbar { padding: calc(18px + var(--safe-t)) 18px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chip-brand { height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.chip-brand svg { width: 16px; height: 16px; stroke: var(--pink); }
.theme-btn .sun { display: var(--theme-icon-sun); }
.theme-btn .moon { display: var(--theme-icon-moon); }

.view-head { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.view h1 { font-size: 36px; line-height: 1.02; font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: 14px; font-weight: 300; color: var(--mute); }
.search input { width: 100%; height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 16px; outline-offset: 0; }
.search input::placeholder { color: var(--mute); }
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.empty { padding: 24px 18px; text-align: center; color: var(--mute); list-style: none; }
.credits { display: flex; justify-content: center; gap: 8px; padding: 32px 18px 8px; font-size: 13px; color: var(--faint); }

/* Navigation (barre flottante en bas sur mobile) */
.nav { position: fixed; z-index: 30; left: 14px; right: 14px; bottom: calc(14px + var(--safe-b)); height: 70px; border-radius: 999px; background: var(--nav); border: 1px solid var(--line); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 20px 40px var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--nav-mute); text-decoration: none; font-size: 11px; font-weight: 500; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current] { color: var(--text); font-weight: 600; }
.nav-top { justify-self: center; position: relative; width: 62px; height: 62px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: var(--grad-round); color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 12px 30px rgba(244,92,214,.6), inset 0 1px 0 rgba(255,255,255,.45); display: grid; place-items: center; }
.nav-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.nav-top circle { stroke: rgba(255,255,255,.3); stroke-width: 3; }
.nav-top .ring-val { stroke: #fff; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray .3s; }
.nav-top span { line-height: 1; text-align: center; }
.nav-top b { display: block; font-size: 16px; font-weight: 700; }
.nav-top small { font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* Cartes des miss (le texte sur photo reste blanc dans les deux thèmes) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; padding: 0 18px; }
.card-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; cursor: pointer; color: #fff; border: 1px solid var(--line); background: var(--photo); box-shadow: 0 30px 60px -24px rgba(244,92,214,.35); transition: box-shadow .2s, border-color .2s; }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-photo::before, .card-photo::after { content: ''; position: absolute; z-index: 1; pointer-events: none; }
.card-photo::before { inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 28%); }
.card-photo::after { left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, rgba(20,10,24,0) 0%, rgba(20,10,24,.55) 45%, rgba(20,10,24,.92) 100%); }
.card .seg { position: absolute; z-index: 2; top: 14px; left: 14px; }
.card-tr { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; }
.rank-badge, .fiche-rank { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; box-shadow: 0 6px 18px rgba(244,92,214,.55); }
.rank-badge:empty { display: none; }
.card.sel .card-photo { border: 1.5px solid var(--pink); box-shadow: 0 0 0 4px rgba(244,92,214,.18), 0 30px 60px -20px rgba(244,92,214,.55); }
.card-body { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--on-photo-accent); }
.card-body h2 { margin-top: -8px; font-size: 26px; line-height: 1.05; font-weight: 600; letter-spacing: -.01em; }
.meta { display: flex; align-items: center; gap: 10px; }
.chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 12px; display: flex; align-items: center; }
.add { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--grad-round); color: #fff; display: grid; place-items: center; box-shadow: var(--glow); transition: transform .15s, box-shadow .15s; }
.add svg { width: 22px; height: 22px; stroke-width: 2.2; }
.add:hover { transform: scale(1.06); }
.add:active { transform: scale(.94); }
.add.picked { background: var(--glass-dark); color: #FF8FD8; box-shadow: inset 0 0 0 1.5px var(--pink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.add.picked svg { fill: currentColor; }

/* Pronos */
.stack { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 18px; list-style: none; }
.card-prono { padding: 14px; }
.card-prono header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-prono header b { font-size: 16px; font-weight: 600; }
.card-prono header small { font-size: 12px; color: var(--mute); }
.prono-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.prono-row li { min-width: 0; text-align: center; }
.prono-row .pic { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--photo); }
.prono-row img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.prono-row .n { position: absolute; left: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.prono-row small { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stats */
.stat { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; }
.stat-rank { width: 28px; flex: none; text-align: center; font-size: 22px; font-weight: 700; color: var(--accent); }
.stat img { width: 52px; height: 52px; flex: none; border-radius: 15px; object-fit: cover; object-position: top; }
.stat-body { flex: 1; min-width: 0; line-height: 1.2; }
.stat-body b { display: block; font-size: 16px; font-weight: 600; }
.stat-body small { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--sep); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; background: var(--grad); }
.stat-pts { flex: none; text-align: right; line-height: 1.1; }
.stat-pts b { font-size: 22px; font-weight: 700; }
.stat-pts small { display: block; font-size: 11px; color: var(--mute); }
.stat.first { border-color: var(--tint-line); background: linear-gradient(150deg, rgba(255,139,167,.2), rgba(181,123,255,.14)); box-shadow: 0 20px 40px -18px rgba(244,92,214,.55); }

/* Palmarès */
.winner { display: flex; align-items: center; gap: 16px; padding: 18px; }
.trophy { width: 58px; height: 58px; flex: none; border-radius: 50%; background: var(--grad-round); box-shadow: var(--glow); display: grid; place-items: center; }
.trophy svg { width: 26px; height: 26px; stroke: #fff; }
.winner small { font-size: 13px; color: var(--accent); font-weight: 500; letter-spacing: .08em; }
.winner b { display: block; font-size: 24px; font-weight: 600; }

/* Mon top 5 : panneau qui monte du bas sur mobile */
.top { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s; visibility: hidden; }
.top.open { transform: none; visibility: visible; transition-delay: 0s; }
.top-inner { max-height: 92dvh; overflow-y: auto; padding: 10px 18px calc(18px + var(--safe-b)); border-radius: 30px 30px 0 0; background: var(--panel); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 -20px 60px var(--shadow); }
.top-inner::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--line); }
.top-head { display: flex; align-items: center; gap: 12px; }
.top-head > div { flex: 1; min-width: 0; }
.top-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.top-head p { font-size: 13px; font-weight: 300; color: var(--mute); }
.count-chip, .tag { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--tint); border: 1px solid var(--tint-line); color: var(--accent-soft); font-size: 13px; font-weight: 600; display: flex; align-items: center; }

.slots { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.slot { position: relative; height: 68px; padding: 0 8px 0 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; cursor: grab; touch-action: pan-y; }
.slot-n { width: 24px; flex: none; text-align: center; font-size: 22px; font-weight: 700; color: var(--accent); }
.slot img { width: 46px; height: 46px; flex: none; border-radius: 15px; object-fit: cover; object-position: top; }
.slot-txt { flex: 1; min-width: 0; line-height: 1.2; }
.slot-txt b, .slot-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-txt b { font-size: 16px; font-weight: 600; }
.slot-txt small { font-size: 12px; color: var(--mute); }
.slot-txt em { display: block; margin-bottom: 3px; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.slot .x { width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); display: grid; place-items: center; }
.slot .x svg { width: 15px; height: 15px; stroke-width: 2.4; }
.grip { width: 24px; flex: none; display: grid; place-items: center; color: var(--faint); }
.grip svg { width: 14px; height: 20px; fill: currentColor; stroke: none; }
/* La n°1 en vedette */
.slot.lead { height: 160px; padding: 16px 20px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0; overflow: hidden; color: var(--lead-text); border-color: var(--tint-line); background: var(--lead); box-shadow: 0 24px 50px -18px rgba(244,92,214,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.slot.lead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 35%); pointer-events: none; }
.slot.lead img { position: absolute; top: 0; right: 0; width: 46%; height: 100%; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.slot.lead .slot-n { position: relative; z-index: 1; width: auto; font-size: 60px; line-height: .9; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slot.lead .slot-txt { position: relative; z-index: 1; flex: none; max-width: 60%; }
.slot.lead .slot-txt b { font-size: 21px; }
.slot.lead .slot-txt small { color: inherit; opacity: .75; }
.slot.lead .x { position: absolute; z-index: 1; top: 10px; right: 10px; background: var(--glass-dark); color: #fff; }
.slot.lead .grip { position: absolute; z-index: 1; right: 16px; bottom: 14px; color: rgba(255,255,255,.8); }
/* Places vides */
.slot.empty { padding: 0; background: transparent; border: 1.5px dashed var(--tint-line); cursor: default; }
.slot.empty button { width: 100%; height: 100%; padding: 0 18px 0 14px; border: 0; border-radius: inherit; background: transparent; color: var(--accent-soft); font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 12px; text-align: left; }
.slot.empty button svg { width: 18px; height: 18px; margin-left: auto; stroke-width: 2.2; }
.slot.empty.target { border-style: solid; border-color: var(--pink); background: var(--tint); }
.sortable-chosen { opacity: .8; }
.sortable-ghost { opacity: .3; }

.top-save { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.top-save input { height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 16px; outline-offset: 0; }
.top-save input::placeholder { color: var(--mute); }
.top-save .cta { height: 58px; font-size: 17px; }

.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Fiche d'identité : plein écran sur mobile */
.fiche { position: fixed; inset: 0; z-index: 60; }
.fiche-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(440px 340px at 50% 58%, var(--halo-1), transparent 62%), var(--bg); }
.fiche-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fiche-photo { position: relative; aspect-ratio: 4 / 5; max-height: 64vh; width: 100%; overflow: hidden; background: var(--photo); }
.fiche-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fiche-photo::before, .fiche-photo::after { content: ''; position: absolute; z-index: 1; pointer-events: none; }
.fiche-photo::before { inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%); }
.fiche-photo::after { left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg) 95%); }
.fiche-bar { position: absolute; z-index: 2; top: calc(14px + var(--safe-t)); left: 14px; right: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.fiche-bar .seg button { height: 34px; padding: 0 15px; font-size: 13px; }
.fiche-rank { justify-self: end; }
.fiche-body { position: relative; z-index: 2; margin-top: -90px; padding: 0 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tag { align-self: flex-start; height: 28px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.fiche-body h2 { margin-top: -4px; font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.fiche-job { margin-top: -6px; font-size: 14px; font-weight: 300; color: var(--mute); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 12px; border-radius: 20px; }
.tile small, .row small { font-size: 11px; color: var(--mute); }
.tile b { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; }
.tile b span { font-size: 13px; font-weight: 400; color: var(--mute); }
.tile b.accent { color: var(--accent); }
.rows { padding: 4px 14px; border-radius: 22px; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; line-height: 1.25; }
.row + .row { border-top: 1px solid var(--sep); }
.ico { width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--tint); color: var(--accent); display: grid; place-items: center; }
.ico svg { width: 17px; height: 17px; }
.row b { display: block; font-size: 15px; font-weight: 500; }
.fiche-resume { font-size: 14px; line-height: 1.5; font-weight: 300; color: var(--mute); }
.fiche-actions { display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(16px + var(--safe-b)); border-top: 1px solid var(--sep); background: var(--panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.fiche-actions .cta { flex: 1; min-width: 0; height: 56px; }

#toast { position: fixed; z-index: 70; left: 50%; bottom: calc(100px + var(--safe-b)); max-width: calc(100% - 36px); padding: 12px 20px; border-radius: 999px; background: var(--toast); color: var(--text); border: 1px solid var(--tint-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 30px var(--shadow); font-size: 14px; text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
html.locked #toast { bottom: calc(24px + var(--safe-b)); }

/* Tablette */
@media (min-width: 600px) {
	.top-inner { max-width: 520px; margin: 0 auto; }
	.fiche { display: grid; place-items: center; padding: 24px; }
	.fiche-panel { position: relative; inset: auto; width: 460px; height: min(880px, calc(100vh - 48px)); border-radius: 30px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px var(--shadow); }
	.fiche-bar { top: 14px; }
}

/* Desktop : navigation en haut, top 5 en colonne à droite */
@media (min-width: 1024px) {
	.app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; padding: 0 40px 40px; }
	.topbar { position: sticky; top: 0; z-index: 20; padding: 18px 0; gap: 24px; background: linear-gradient(180deg, var(--bg) 55%, var(--bg-0)); }
	.topbar .theme-btn { order: 3; }
	.nav { position: static; height: 52px; padding: 5px; display: flex; gap: 4px; margin-left: auto; background: var(--glass); box-shadow: none; }
	.nav a { flex-direction: row; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; transition: background .15s; }
	.nav a svg { width: 18px; height: 18px; }
	.nav a:hover { background: var(--nav-active); }
	.nav a[aria-current] { background: var(--nav-active); }
	.nav-top { display: none; }
	.view-head, .grid, .stack { padding-left: 0; padding-right: 0; }
	.filters { margin: 0; padding: 0; }
	.view h1 { font-size: 46px; }
	.view h1 br { display: none; }
	.grid { gap: 20px; }
	.card-body h2 { font-size: 22px; }
	.top { position: sticky; top: 24px; z-index: 1; align-self: start; margin-top: 24px; transform: none; visibility: visible; transition: none; }
	.top-inner { max-width: none; max-height: calc(100vh - 48px); padding: 20px; border-radius: 30px; border: 1px solid var(--line); background: var(--glass); box-shadow: 0 30px 60px -30px rgba(244,92,214,.45); }
	.top-inner::before, .top-close { display: none; }
	.scrim { z-index: 55; }
	#toast { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}