/**
 * Okane Portfolio — palette du site et interrupteur sombre / clair.
 *
 * Source unique des couleurs : chaque composant (.okl, le header, la bulle, les
 * vignettes, la boutique) garde ses propres variables, mais celles-ci pointent
 * désormais toutes ici. Changer de thème ne redéfinit donc qu'un seul jeu de
 * jetons, sur <html>, au lieu d'un jeu par composant.
 *
 * Le mode sombre est celui du site : il n'a besoin d'aucun attribut. Le mode
 * clair s'active par data-okane-theme="light", posé avant le premier rendu par
 * le script en-tête (voir Okane_Chrome::theme_boot) puis par okane-theme.js.
 *
 * Les voiles posés SUR les photos (dégradés de hero, légendes en blanc) restent
 * sombres dans les deux thèmes : ce qui doit rester lisible, c'est le texte
 * blanc sur l'image, pas la page autour.
 */

:root {
	color-scheme: dark;

	--ok-bg: #0a0a0b;
	--ok-bg-soft: #111114;
	--ok-ink: #f4f2ee;
	--ok-ink-soft: #d3d0ca;
	--ok-muted: #8b8a86;
	--ok-line: rgba(255, 255, 255, .12);
	--ok-line-strong: rgba(255, 255, 255, .22);
	--ok-accent: #e9dccb;
	--ok-on-accent: #0a0a0b;

	/* Fond translucide des pastilles et de la bulle (toujours avec un flou). */
	--ok-surface: rgba(12, 12, 14, .78);
	/* Survol discret d'une ligne de menu ou d'un champ. */
	--ok-hover: rgba(255, 255, 255, .07);
	--ok-field-bg: rgba(255, 255, 255, .03);
	--ok-field-focus-bg: rgba(255, 255, 255, .05);
	--ok-shadow: rgba(0, 0, 0, .55);
	--ok-grain: .05;

	--ok-err-line: #e0715f;
	--ok-err-ink: #f0968a;
	--ok-err-bg: rgba(224, 113, 95, .09);
}

/* Clair : même famille chaude, valeurs retournées. L'accent sable du mode
   sombre disparaîtrait sur un fond crème — il passe donc au bronze, assez
   foncé pour porter du texte et servir de fond de bouton. */
:root[data-okane-theme="light"] {
	color-scheme: light;

	--ok-bg: #f7f5f0;
	--ok-bg-soft: #ece8e0;
	--ok-ink: #17161a;
	--ok-ink-soft: #3d3a36;
	--ok-muted: #6e6a64;
	--ok-line: rgba(23, 22, 26, .14);
	--ok-line-strong: rgba(23, 22, 26, .3);
	--ok-accent: #7a5c3a;
	--ok-on-accent: #faf8f4;

	--ok-surface: rgba(250, 248, 244, .82);
	--ok-hover: rgba(23, 22, 26, .06);
	--ok-field-bg: rgba(23, 22, 26, .03);
	--ok-field-focus-bg: rgba(23, 22, 26, .05);
	--ok-shadow: rgba(23, 22, 26, .18);
	/* Le grain se voit davantage sur un fond clair : on l'allège. */
	--ok-grain: .03;

	--ok-err-line: #b4402c;
	--ok-err-ink: #8f3323;
	--ok-err-bg: rgba(180, 64, 44, .08);
}

/* ================================================================== */
/* Ce qui se pose sur une photo                                        */
/* ================================================================== */
/* Hero, en-tête en surimpression, cartes de voyage, visionneuse : ces blocs
   sont posés sur une image, sous un voile sombre qui garantit la lisibilité et
   qui, lui, ne change pas de thème. Leur texte doit donc rester clair même en
   mode clair — sans quoi on écrirait en encre noire sur une photo de Venise.
   On redéfinit les variables du bloc plutôt que ses règles de couleur : rien
   n'est dupliqué, tout ce qui vit dedans suit. */
:root[data-okane-theme="light"] .okl-hero,
:root[data-okane-theme="light"] .okl-vhero:not(.okl-vhero--bare),
:root[data-okane-theme="light"] .okl-split__side,
:root[data-okane-theme="light"] .okl-next,
:root[data-okane-theme="light"] .okl-mnote,
:root[data-okane-theme="light"] .okl-vcard__fav,
:root[data-okane-theme="light"] .okl-lb,
:root[data-okane-theme="light"] body:has(.okl-hero, .okl-vhero:not(.okl-vhero--bare)) .okane-chrome-header {
	/* jetons partagés (interrupteur, vignettes) */
	--ok-ink: #f4f2ee;
	--ok-ink-soft: #d3d0ca;
	--ok-muted: #b6b3ad;
	--ok-line: rgba(255, 255, 255, .16);
	--ok-line-strong: rgba(255, 255, 255, .3);
	--ok-accent: #e9dccb;
	--ok-on-accent: #0a0a0b;
	--ok-surface: rgba(12, 12, 14, .78);
	--ok-hover: rgba(255, 255, 255, .07);

	/* variables locales : elles sont calculées sur .okl et sur le header, donc
	   hors de portée d'une simple redéfinition des jetons ci-dessus. */
	--okl-ink: var(--ok-ink);
	--okl-muted: var(--ok-muted);
	--okl-line: var(--ok-line);
	--okl-accent: var(--ok-accent);
	--okc-ink: var(--ok-ink);
	--okc-muted: var(--ok-muted);
	--okc-line: var(--ok-line);
	--okc-accent: var(--ok-accent);
}
:root[data-okane-theme="light"] .okl-hero,
:root[data-okane-theme="light"] .okl-vhero:not(.okl-vhero--bare),
:root[data-okane-theme="light"] .okl-split__side,
:root[data-okane-theme="light"] .okl-next,
:root[data-okane-theme="light"] .okl-mnote,
:root[data-okane-theme="light"] .okl-lb {
	color: var(--ok-ink);
}

/* Une page immersive sans photo (Contact, Mariage, la boutique) n'a rien sous
   son en-tête : en mode clair, le voile de lisibilité y devient une salissure
   grise en haut d'une page crème. */
:root[data-okane-theme="light"] body:not(:has(.okl-hero, .okl-vhero:not(.okl-vhero--bare))) .okane-chrome-header::before {
	display: none;
}

/* ================================================================== */
/* Interrupteur                                                        */
/* ================================================================== */
/* Une seule pastille, deux emplacements : seule dans le header, en fin de liste
   dans la bulle. Le curseur se pose sur le mode actif — c'est lui qui dit où
   l'on est, les deux icônes restant visibles pour dire où l'on peut aller. */
.oktheme {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.oktheme__track {
	position: relative;
	flex: none;
	width: 54px;
	height: 28px;
	border: 1px solid var(--ok-line);
	border-radius: 999px;
	background: var(--ok-surface);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color .35s cubic-bezier(.19, 1, .22, 1);
}
.oktheme:hover .oktheme__track { border-color: var(--ok-line-strong); }

.oktheme__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ok-accent);
	/* Sombre = curseur à droite, sur la lune. */
	transform: translateX(26px);
	transition: transform .45s cubic-bezier(.19, 1, .22, 1), background .35s ease;
}
.oktheme[aria-checked="true"] .oktheme__thumb { transform: none; }

/* Les icônes SONT les <svg> : leur taille se pose ici, sans règle générique
   .oktheme svg qui l'emporterait par spécificité et les ferait déborder. */
.oktheme__i {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: block;
	width: 13px;
	height: 13px;
	margin-top: -6.5px;
	color: var(--ok-muted);
	transition: color .35s ease;
}
.oktheme__i--sun { left: 6.5px; }
/* Sombre : le curseur est sur la lune, qui se lit donc sur l'accent. */
.oktheme__i--moon { left: 32.5px; color: var(--ok-on-accent); }
.oktheme[aria-checked="true"] .oktheme__i--moon { color: var(--ok-muted); }
.oktheme[aria-checked="true"] .oktheme__i--sun { color: var(--ok-on-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. */
.oktheme,
.oktheme:hover,
.oktheme:focus { background-color: transparent; color: inherit; box-shadow: none; }

.oktheme:focus-visible { outline: 2px solid var(--ok-accent); outline-offset: 4px; border-radius: 999px; }
.oktheme:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.oktheme__track, .oktheme__thumb, .oktheme__i { transition: none; }
}