/**
 * Okane — header + footer de site partagés (navigation inter-pages).
 * Design sombre cohérent avec la landing (.okl). Préfixe : okc-.
 */

/* Masque le chrome natif d'Astra quand notre header/footer prend le relais. */
.okane-has-chrome #masthead,
.okane-has-chrome .site-header,
.okane-has-chrome #colophon,
.okane-has-chrome .site-footer,
.okane-has-chrome .ast-above-header-wrap,
.okane-has-chrome .ast-below-header-wrap {
	display: none !important;
}

/* Pages de vente plein écran (presets, tirages) : le shortcode fournit son
   propre décor sombre. On supprime le bandeau de titre et le fond clair du
   thème pour éviter la bande blanche au-dessus du contenu. */
.okane-dark-page {
	background: var(--ok-bg, #0a0a0b) !important;
}
.okane-dark-page .entry-header,
.okane-dark-page .ast-single-post-order,
.okane-dark-page .page-header,
.okane-dark-page .ast-breadcrumbs,
.okane-dark-page .ast-archive-description {
	display: none !important;
}
.okane-dark-page #page,
.okane-dark-page #content,
.okane-dark-page .site-content,
.okane-dark-page .ast-container,
.okane-dark-page .site-primary,
.okane-dark-page #primary,
.okane-dark-page .entry-content,
.okane-dark-page .ast-article-single {
	background: transparent !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Variables locales (mêmes valeurs que la landing .okl). */
.okane-chrome-header,
.okane-chrome-footer {
	--okc-bg: var(--ok-bg, #0a0a0b);
	--okc-ink: var(--ok-ink, #f4f2ee);
	--okc-muted: var(--ok-muted, #8b8a86);
	--okc-line: var(--ok-line, rgba(255, 255, 255, .12));
	--okc-accent: var(--ok-accent, #e9dccb);
	--okc-pad: clamp(20px, 5vw, 90px);
	--okc-display: 'Space Grotesk', system-ui, sans-serif;
	--okc-serif: 'Fraunces', Georgia, serif;
	--okc-ease: cubic-bezier(.19, 1, .22, 1);
	font-family: var(--okc-display);
	box-sizing: border-box;
}
.okane-chrome-header *,
.okane-chrome-footer * { box-sizing: border-box; }
.okane-chrome-header a,
.okane-chrome-footer a { text-decoration: none; color: inherit; }

/* ---- Header ---- */
/* Header unique du site (monogramme + panier ; la navigation vit dans la bulle).
   En flux (sticky) sur les pages classiques : il réserve naturellement sa hauteur.
   En overlay (fixed) sur les vues immersives, pour ne pas rogner le hero. */
.okane-chrome-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--okc-bg);
	color: var(--okc-ink);
	border-bottom: 1px solid var(--okc-line);
	transition: opacity .4s var(--okc-ease), transform .4s var(--okc-ease), visibility .4s;
}
.okane-immersive .okane-chrome-header {
	position: fixed;
	left: 0;
	width: 100%;
	background: transparent;
	border-bottom: 0;
}
/* Voile de lisibilité : il déborde de 40px sous le header pour que le dégradé
   finisse dans le vide. Peint dans la boîte, il laissait une cassure d'un pixel
   à son bord inférieur. */
.okane-immersive .okane-chrome-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100% + 40px);
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 10, 11, .7) 0%, rgba(10, 10, 11, 0) 100%);
}
/* Bascule haut de page ↔ bulle : le header se retire vers le haut pendant que la
   pastille « Menu » monte du bas. Le décalage de .12s enchaîne les deux mouvements
   au lieu de les superposer — l'œil lit un seul objet qui change de place.
   L'état est porté par <html> (okane-nav.js), pour que header et bulle restent
   pilotés par la même bascule. */
.okane-chrome-header { transition-delay: .12s; }
.okane-scrolled .okane-chrome-header {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	pointer-events: none;
	transition-delay: 0s;
}
.admin-bar .okane-chrome-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .okane-chrome-header { top: 46px; } }

.okc-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px var(--okc-pad);
	max-width: 1600px;
	margin: 0 auto;
}
/* Logo officiel. Peint par un masque plutôt que servi comme image : il prend
   ainsi l'encre courante, donc la bonne couleur en thème clair comme sombre, et
   sur une photo où le texte doit rester clair. Un seul fichier pour tous les cas. */
.okc-logo,
.okc-foot-logo {
	display: block;
	background: currentColor;
	-webkit-mask: url(../img/logo-masque.png) center / contain no-repeat;
	mask: url(../img/logo-masque.png) center / contain no-repeat;
	aspect-ratio: 1200 / 1275;
}
.okc-logo {
	height: clamp(24px, 2.6vw, 32px);
}
/* Repli : sans masque CSS, le monogramme redevient du texte plutôt que de
   laisser un carré plein. */
@supports not ((-webkit-mask: none) or (mask: none)) {
	.okc-logo,
	.okc-foot-logo {
		background: none;
		height: auto;
		aspect-ratio: auto;
		font-family: var(--okc-serif);
		font-weight: 600;
		letter-spacing: -.02em;
		line-height: 1;
	}
	.okc-logo .okane-sr,
	.okc-foot-logo .okane-sr {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
	}
	.okc-logo { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
	.okc-foot-logo { font-size: clamp(1.5rem, 2.6vw, 2rem); }
}
.okane-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Liens du menu, repris tels quels dans la bulle : une seule liste, deux formes.
   Sous 860px ils cèdent la place à la bulle, seule assez compacte. */
.okc-nav {
	display: flex;
	align-items: center;
	gap: 30px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.okc-nav > a { position: relative; padding: 4px 0; color: var(--okc-ink); }
.okc-nav > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: currentColor;
	transition: width .4s var(--okc-ease);
}
.okc-nav > a:hover::after { width: 100%; }
.okc-nav > a[aria-current="page"] { color: var(--okc-accent); }
@media (max-width: 860px) { .okc-nav { display: none; } }

.okc-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid var(--okc-line);
	border-radius: 999px;
	transition: border-color .3s var(--okc-ease), background .3s var(--okc-ease);
}
.okc-cart::after { display: none !important; }
.okc-cart:hover { border-color: var(--okc-accent); background: var(--ok-hover, rgba(255, 255, 255, .07)); }
.okc-cart-count {
	min-width: 18px; height: 18px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--okc-accent); color: var(--ok-on-accent, #0a0a0b);
	font-size: 11px; font-weight: 600; letter-spacing: 0;
}

/* Bouton « Me contacter » : plein, pour se détacher des liens du menu. */
.okane-chrome-header .okc-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--okc-accent);
	border-radius: 999px;
	background: var(--okc-accent);
	color: var(--ok-on-accent, #0a0a0b);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .3s var(--okc-ease), color .3s var(--okc-ease);
}
.okane-chrome-header .okc-cta:hover,
.okane-chrome-header .okc-cta:focus-visible { background: transparent; color: var(--okc-accent); }
/* Sous 860px le menu disparaît : le bouton rejoint le panier à droite. */
@media (max-width: 860px) { .okane-chrome-header .okc-cta { margin-left: auto; } }

/* Flèche « remonter en haut » d'Astra : crème du site au lieu du bleu du thème.
   Couleurs fixes (pas de variable de thème) : pastille crème et flèche noire
   restent lisibles en clair comme en sombre, sur n'importe quelle photo. */
.okane-has-chrome #ast-scroll-top,
.okane-has-chrome #ast-scroll-top:hover {
	background-color: #e9dccb;
	color: #0a0a0b;
}
.okane-has-chrome #ast-scroll-top svg { fill: currentColor; }

/* Le burger et son tiroir ont disparu avec la bulle de navigation, qui assure
   désormais le menu sur toutes les tailles d'écran (voir okane-nav.css). */

/* ---- Footer ---- */
/* Pied de page unique du site, y compris sous les pages immersives, qui n'ont
   plus le leur : une seule liste à tenir, et les mentions légales joignables
   depuis n'importe quelle page. */
.okane-chrome-footer {
	background: var(--okc-bg);
	color: var(--okc-muted);
	border-top: 1px solid var(--okc-line);
}
.okc-foot-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: clamp(48px, 9vh, 92px) var(--okc-pad) clamp(26px, 4vh, 40px);
}

/* Identité à gauche, plan du site à droite. */
.okc-foot-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(36px, 6vw, 90px);
	padding-bottom: clamp(34px, 6vh, 58px);
}
@media (max-width: 860px) {
	.okc-foot-top { grid-template-columns: 1fr; gap: clamp(32px, 6vh, 48px); }
}

.okc-foot-logo {
	height: clamp(30px, 4vw, 42px);
	color: var(--okc-ink);
}
.okc-foot-base {
	margin: 14px 0 0;
	max-width: 28ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--okc-muted);
}
.okc-foot-mail { margin: 14px 0 0; font-size: 14px; }
.okc-foot-mail a { color: var(--okc-ink); transition: color .3s var(--okc-ease); }
.okc-foot-mail a:hover { color: var(--okc-accent); }

/* Trois colonnes rangées par intention : le travail, la boutique, le studio. */
.okc-foot-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 520px) {
	.okc-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
.okc-foot-coltitle {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--okc-accent);
}
.okc-foot-col ul { list-style: none; margin: 0; padding: 0; }
.okc-foot-col li + li { margin-top: 10px; }
.okc-foot-col a {
	font-size: 14px;
	color: var(--okc-muted);
	transition: color .3s var(--okc-ease);
}
.okc-foot-col a:hover { color: var(--okc-ink); }

/* Bas de page : copyright, mentions légales, signature. */
.okc-foot-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: clamp(20px, 3vh, 28px);
	border-top: 1px solid var(--okc-line);
	font-size: 12px;
}
.okc-foot-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}
.okc-foot-legal a,
.okc-foot-cookies {
	color: var(--okc-muted);
	font: inherit;
	transition: color .3s var(--okc-ease);
}
.okc-foot-legal a:hover,
.okc-foot-cookies:hover { color: var(--okc-accent); }

/* 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-foot-cookies,
.okc-foot-cookies:hover,
.okc-foot-cookies:focus { background-color: transparent; }
.okc-foot-cookies:focus { color: var(--okc-accent); }
/* Le lien qui rouvre le bandeau est un bouton (il n'ouvre pas une page) : on
   lui retire l'habillage de bouton pour qu'il se lise comme ses voisins. */
.okc-foot-cookies {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--okc-line);
}
.okc-foot-by a { color: var(--okc-ink); }
.okc-foot-by a:hover { color: var(--okc-accent); }

/* Focus clavier : l'anneau est le seul repère de position sans souris. */
.okane-chrome-header :focus-visible,
.okane-chrome-footer :focus-visible {
	outline: 2px solid var(--okc-accent);
	outline-offset: 3px;
}
.okane-chrome-header :focus:not(:focus-visible),
.okane-chrome-footer :focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.okane-chrome-header,
	.okane-chrome-header * { transition: none !important; animation: none !important; }
}

/* Réseaux sociaux du pied de page partagé. */
.okc-foot-social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.okc-foot-social a {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--okc-line);
	border-radius: 100px;
	transition: border-color .3s var(--okc-ease), color .3s var(--okc-ease);
}
.okc-foot-social a:hover { border-color: var(--okc-accent); }
.okc-foot-social a { color: var(--okc-muted); }
.okc-foot-social a:hover { color: var(--okc-accent); }

/* Interrupteur sombre / clair : dernier élément de la barre, après le panier.
   Le composant lui-même vit dans okane-theme.css — ici, seulement sa place. */
.okc-theme { flex: none; margin-left: -6px; }
/* Sous 860px la barre se réduit au monogramme et au panier : l'interrupteur
   passe alors dans la bulle, qui est la seule navigation à cette taille. */
@media (max-width: 860px) { .okc-theme { display: none; } }

/* Sélecteur de langue « FR · EN », juste après l'interrupteur : la langue
   affichée prend l'accent, comme la page courante dans le menu ; l'autre reste
   en retrait. Sous 860px il suit l'interrupteur dans la bulle. */
.okc-lang {
	flex: none;
	margin-left: -6px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.oklang__links { display: inline-flex; align-items: center; gap: 6px; }
.okc-lang a { color: var(--okc-muted); text-decoration: none; transition: color .3s var(--okc-ease); }
.okc-lang a:hover { color: var(--okc-ink); }
.okc-lang a[aria-current] { color: var(--okc-accent); }
.okc-lang .oklang__sep { color: var(--okc-muted); }
@media (max-width: 860px) { .okc-lang { display: none; } }