/**
 * Okane Portfolio — bulle de navigation flottante (.okn) et transitions de page.
 *
 * Une seule navigation pour tout le site : elle remplace à la fois la liste de
 * liens des pages immersives et le menu burger de l'en-tête partagée. Autonome
 * (ses propres variables) pour fonctionner aussi bien sur une page .okl sombre
 * que sur une page de thème claire.
 */
/* En haut de page, c'est le header qui porte le menu : la bulle est repliée vers
   le bas, prête à monter. Le décalage de .12s à l'apparition la fait arriver une
   fois le header parti — les deux formes se relaient au lieu de se croiser. */
.okn {
	--okn-bg: var(--ok-surface, rgba(12, 12, 14, .78));
	--okn-ink: var(--ok-ink, #f4f2ee);
	--okn-muted: var(--ok-muted, #9a9893);
	--okn-line: var(--ok-line, rgba(255, 255, 255, .14));
	--okn-accent: var(--ok-accent, #e9dccb);
	--okn-ease: cubic-bezier(.19, 1, .22, 1);
	position: fixed;
	left: 50%;
	/* --okn-lift (posée par okane-nav.js) remonte la bulle de la hauteur du pied
	   de page visible : arrivée en bas, elle s’arrête juste au-dessus au lieu d’en
	   recouvrir les liens. Vaut 0 tant que le pied de page n’est pas atteint. */
	bottom: calc(clamp(16px, 3vh, 30px) + var(--okn-lift, 0px));
	z-index: 65;                 /* au-dessus du grain et du curseur, sous la visionneuse */
	font-family: 'Space Grotesk', system-ui, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(16px) scale(.88);
	pointer-events: none;
	transition: opacity .4s var(--okn-ease), transform .4s var(--okn-ease), visibility .4s;
}
.okane-scrolled .okn {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
	pointer-events: auto;
	transition-delay: .12s;
}
/* Sous 860px, les liens du header sont masqués : la bulle est la seule
   navigation et reste donc affichée en permanence. */
@media (max-width: 860px) {
	.okn,
	.okane-scrolled .okn {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
		pointer-events: auto;
	}
}

/* ----- pastille ----- */
.okn-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 13px 22px;
	border: 1px solid var(--okn-line);
	border-radius: 100px;
	background: var(--okn-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--okn-ink);
	font: inherit;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .4s var(--okn-ease), border-color .4s var(--okn-ease), color .4s var(--okn-ease);
}
.okn-toggle:hover {
	background: var(--okn-accent);
	border-color: var(--okn-accent);
	color: var(--ok-on-accent, #0a0a0b);
}
.okn-dots {
	display: inline-flex;
	gap: 4px;
}
.okn-dots span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	transition: transform .4s var(--okn-ease), opacity .4s var(--okn-ease);
}
/* ouvert : les trois points se resserrent en un seul (retour visuel discret) */
.okn.is-open .okn-dots span:first-child { transform: translateX(8px); opacity: 0; }
.okn.is-open .okn-dots span:last-child { transform: translateX(-8px); opacity: 0; }

/* ----- panneau ----- */
.okn-panel {
	order: -1;                   /* le panneau s'ouvre au-dessus de la pastille */
	min-width: min(280px, calc(100vw - 32px));
	padding: 12px;
	border: 1px solid var(--okn-line);
	border-radius: 20px;
	background: var(--okn-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(10px) scale(.97);
	transform-origin: bottom center;
	transition: opacity .4s var(--okn-ease), transform .4s var(--okn-ease);
}
.okn-panel[hidden] { display: none; }
.okn.is-open .okn-panel { opacity: 1; transform: none; }

.okn-panel ul { list-style: none; margin: 0; padding: 0; }
.okn-panel a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 16px;
	border-radius: 12px;
	color: var(--okn-ink);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background .3s var(--okn-ease), color .3s var(--okn-ease);
}
.okn-panel a:hover { background: var(--ok-hover, rgba(255, 255, 255, .07)); }
.okn-panel a[aria-current="page"] { color: var(--okn-accent); }
.okn-panel .okn-num {
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--okn-muted);
	min-width: 18px;
}
.okn-panel .okn-count {
	margin-left: auto;
	font-size: 11px;
	color: var(--okn-muted);
}

/* Focus clavier : la bulle est le principal chemin de navigation sans souris. */
.okn :focus-visible {
	outline: 2px solid var(--okn-accent);
	outline-offset: 3px;
}
.okn :focus:not(:focus-visible) { outline: none; }
/* Le curseur personnalisé de .okl masque le pointeur : on le rétablit sur la bulle. */
.okn, .okn * { cursor: auto; }
.okn a, .okn button { cursor: pointer; }

@media (max-width: 420px) {
	.okn-toggle { padding: 12px 18px; letter-spacing: .16em; }
}

/* ----- transitions de page (« feed continu ») ----- */
/* Navigation entre documents : fondu natif là où le navigateur le sait faire. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; }

/* Repli scripté pour les navigateurs sans View Transitions : la page sortante
   s'efface avant que le lien ne soit suivi. */
.okn-leaving { opacity: 0; transition: opacity .22s ease; }

@media (prefers-reduced-motion: reduce) {
	.okn, .okn *, .okn-panel { transition: none !important; }
	.okn-leaving { opacity: 1; transition: none; }
	@view-transition { navigation: none; }
}

/* Interrupteur sombre / clair : dernière ligne du panneau, calée sur la même
   grille que les liens (numéro, libellé, puis la commande à droite). */
.okn-theme {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 16px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--okn-ink);
	font: inherit;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s var(--okn-ease);
}
.okn-theme,
.okn-theme:hover,
.okn-theme:focus { background-color: transparent; color: var(--okn-ink); }
.okn-theme:hover { background-color: var(--ok-hover, rgba(255, 255, 255, .07)); }
/* La pastille garde son fond translucide, focus clavier compris (voir la note
   sur les boutons du thème dans okane-theme.css). */
.okn-toggle:focus { background-color: var(--okn-bg); color: var(--okn-ink); }
.okn-toggle:hover, .okn-toggle:focus-visible {
	background-color: var(--okn-accent);
	color: var(--ok-on-accent, #0a0a0b);
}
.okn-theme .oktheme__label { flex: 1; text-align: left; }
/* Séparé des liens : c'est un réglage, pas une destination. */
.okn-panel li:has(.okn-theme) {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--okn-line);
}

/* ----- bouton contact, en haut au centre tant que la bulle est ouverte ----- */
.okn-cta {
	position: fixed;
	top: clamp(16px, 3vh, 30px);
	left: 50%;
	z-index: 65;
	padding: 12px 24px;
	border: 1px solid var(--ok-accent, #e9dccb);
	border-radius: 999px;
	background: var(--ok-accent, #e9dccb);
	color: var(--ok-on-accent, #0a0a0b);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-12px);
	transition: opacity .4s cubic-bezier(.19, 1, .22, 1), transform .4s cubic-bezier(.19, 1, .22, 1), visibility .4s, background .3s, color .3s;
}
.admin-bar .okn-cta { top: calc(32px + clamp(16px, 3vh, 30px)); }
.okn.is-open + .okn-cta {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
}
.okn-cta:hover,
.okn-cta:focus-visible {
	background: var(--ok-surface, rgba(12, 12, 14, .78));
	color: var(--ok-accent, #e9dccb);
}
@media (prefers-reduced-motion: reduce) {
	.okn-cta { transition: none; }
}

/* Sélecteur de langue : sous l'interrupteur, sur la même grille (numéro,
   libellé, puis FR · EN à droite). */
.okn-lang {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	color: var(--okn-ink);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.okn-lang .oklang__label { flex: 1; }
.okn-panel .okn-lang a {
	display: inline-block;
	padding: 6px 4px;
	border-radius: 6px;
	color: var(--okn-muted);
}
.okn-panel .okn-lang a:hover { background: none; color: var(--okn-ink); }
.okn-panel .okn-lang a[aria-current] { color: var(--okn-accent); }
.okn-lang .oklang__sep { color: var(--okn-muted); }