/**
 * Okane Portfolio — bandeau de consentement aux cookies.
 *
 * Posé en bas à gauche plutôt qu'en travers de l'écran : il doit se voir sans
 * prendre la page en otage, et laisser la bulle de navigation (centrée) et le
 * contenu accessibles pendant qu'on décide.
 */

.okc-cookies {
	--okk-ease: cubic-bezier(.19, 1, .22, 1);
	position: fixed;
	left: clamp(14px, 2.5vw, 28px);
	bottom: clamp(14px, 2.5vw, 28px);
	z-index: 80;                       /* au-dessus de la bulle (65), sous la visionneuse */
	width: min(420px, calc(100vw - 28px));
	box-sizing: border-box;
	padding: 20px 22px;
	border: 1px solid var(--ok-line);
	border-radius: 18px;
	background: var(--ok-surface);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 26px 60px var(--ok-shadow);
	color: var(--ok-ink);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .4s var(--okk-ease), transform .4s var(--okk-ease);
}
.okc-cookies * { box-sizing: border-box; }
.okc-cookies[hidden] { display: none; }
.okc-cookies.is-on { opacity: 1; transform: none; }

.okc-cookies__title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ok-accent);
}
.okc-cookies__text p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ok-ink-soft);
}
.okc-cookies__text a { color: var(--ok-ink); text-decoration: underline; text-underline-offset: 3px; }
.okc-cookies__text a:hover { color: var(--ok-accent); }

.okc-cookies__acts {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
/* Même taille, même graisse, même largeur : refuser ne doit pas être le petit
   lien gris à côté du gros bouton. */
.okc-cookies__btn {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--ok-line);
	border-radius: 100px;
	background: none;
	color: var(--ok-ink);
	font: inherit;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s var(--okk-ease), border-color .3s var(--okk-ease), color .3s var(--okk-ease);
}

/* Astra habille tout <button> au survol et au focus — fond plein, texte blanc —
   et « button:focus » l'emporte sur une simple classe. Nos boutons portent leur
   propre habillage : ils reprennent donc la main explicitement sur ces états,
   sinon un appui clavier les repeint en bleu. */
.okc-cookies__btn,
.okc-cookies__btn:hover,
.okc-cookies__btn:focus {
	background-color: transparent;
	color: var(--ok-ink);
	border-color: var(--ok-line);
}
.okc-cookies__btn:hover { border-color: var(--ok-line-strong); background-color: var(--ok-hover); }

.okc-cookies__btn--yes,
.okc-cookies__btn--yes:hover,
.okc-cookies__btn--yes:focus {
	background-color: var(--ok-accent);
	border-color: var(--ok-accent);
	color: var(--ok-on-accent);
}
.okc-cookies__btn--yes:hover { background-color: var(--ok-ink); border-color: var(--ok-ink); color: var(--ok-bg); }

.okc-cookies :focus-visible { outline: 2px solid var(--ok-accent); outline-offset: 3px; }
.okc-cookies :focus:not(:focus-visible) { outline: none; }
/* Le curseur personnalisé de .okl masque le pointeur : on le rétablit ici. */
.okc-cookies, .okc-cookies * { cursor: auto; }
.okc-cookies a, .okc-cookies button { cursor: pointer; }

@media (max-width: 520px) {
	.okc-cookies { padding: 18px; }
	.okc-cookies__acts { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.okc-cookies, .okc-cookies__btn { transition: none; }
}