/* Hallmark · shape: Stage · genre: modern-minimal · theme: Dusk (by request) · job: try · draw: manual
 * pages: films, livres, voyage, famille · hero: stage, head left over the scrim, the product in glass on the right · nav: la barre de menus commune, en verre ardoise · footer: une ligne et le crédit photo · imagery: photographs (une salle de lecture), the product built · signature: le service en verre fumé posé sur une photographie de son monde · dusk: salles/periwinkle-apricot/glass
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R1 V2 · weakest: R, la page ne fait que deux sections parce que le contenu tient en deux gestes, chercher et lire */

/* ---------- jetons Dusk (bloc de thème) ---------- */
[data-theme="dusk"] {
  --color-paper: oklch(17.5% 0.014 268); --color-paper-2: oklch(21% 0.016 268); --color-paper-3: oklch(25% 0.017 268);
  --color-ink: oklch(96% 0.006 75); --color-ink-2: oklch(85% 0.010 262); --color-muted: oklch(70% 0.016 262);
  --color-rule: oklch(30% 0.016 266); --color-rule-2: oklch(38% 0.016 266); --color-light: oklch(100% 0 0); --color-shade: oklch(10% 0.022 268);
  --color-accent: oklch(77% 0.10 274); --color-accent-ink: oklch(19% 0.035 274); --color-accent-hi: oklch(84% 0.085 274);
  --color-accent-deep: oklch(44% 0.13 274); --color-accent-soft: oklch(91% 0.038 274); --color-focus: oklch(80% 0.10 274);
  --color-accent-2: oklch(83% 0.095 62); --color-selection: oklch(40% 0.08 274);
  --color-well: oklch(95.5% 0.008 75); --color-well-2: oklch(92% 0.010 75); --color-well-ink: oklch(21% 0.016 268); --color-well-muted: oklch(47% 0.016 265); --color-well-rule: oklch(87.5% 0.009 75); --color-card: oklch(99.5% 0.003 75);
  --color-cover-1: oklch(42% 0.09 274); --color-cover-2: oklch(40% 0.07 200); --color-cover-3: oklch(48% 0.09 62); --color-cover-4: oklch(36% 0.06 330); --color-cover-ink: oklch(96% 0.01 75);
  --color-bar: oklch(17.5% 0.014 268 / 0.55);
  --glass: oklch(22% 0.018 268 / 0.58); --glass-blur: 22px;
  --glass-hi: inset 0 1px 0 oklch(100% 0 0 / 0.10), inset 0 0 0 1px oklch(100% 0 0 / 0.06);
  --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 40px 80px -32px oklch(8% 0.02 268 / 0.7);
  --scrim: oklch(12% 0.02 268);
  --font-display: "Wix Madefor Display", ui-sans-serif, system-ui, sans-serif; --font-body: "Wix Madefor Text", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 18px; --radius-inner: 10px; --radius-pill: 999px;
  --tracking-display: -0.022em; --display-weight: 500;
  background: var(--color-paper); color: var(--color-ink);
}
body[data-theme="dusk"] .wall { display: none; }
html:has(body[data-theme="dusk"]) { scrollbar-color: var(--color-rule-2) var(--color-paper); background: var(--color-paper); }
body[data-theme="dusk"] .menubar { border-bottom-color: color-mix(in oklab, var(--color-light) 8%, transparent); }
body[data-theme="dusk"] .menubar__menu a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }

/* ---------- hero : la salle de lecture ---------- */
.dk-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(620px, calc(100dvh - var(--bar-h))); margin-top: calc(var(--bar-h) * -1); padding-block: calc(var(--bar-h) + 48px) 72px; overflow: clip; }
.dk-hero__photo { position: absolute; inset: 0; z-index: -2; }
.dk-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: contrast(1.04) saturate(1.03); transform-origin: 50% 40%; }
.dk-hero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 64% 76% at 18% 55%, color-mix(in oklab, var(--scrim) 88%, transparent), transparent 80%),
    linear-gradient(to bottom, color-mix(in oklab, var(--scrim) 40%, transparent), transparent 30%, transparent 68%, var(--color-paper)); }
.dk-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 960px) { .dk-hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.dk-hero__text { min-width: 0; }
.dk-hero h1 { max-width: 12ch; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.04; font-weight: var(--display-weight); letter-spacing: var(--tracking-display); color: var(--color-ink); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.dk-lead { max-width: 32ch; margin-top: 20px; font-size: 1.1875rem; line-height: 1.5; color: var(--color-ink-2); }
.dk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dk-access { margin-top: 20px; font-size: 0.9375rem; color: var(--color-muted); }

/* boutons pilule */
.dk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 0.9375rem/1 var(--font-body); text-decoration: none; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent); transition: background-color var(--dur-micro) linear, box-shadow var(--dur-micro) linear, transform var(--dur-micro) var(--ease-out); }
.dk-btn:hover { background: var(--color-accent-hi); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent), 0 0 0 4px color-mix(in oklab, var(--color-accent) 22%, transparent); }
.dk-btn:active { transform: scale(0.98); }
.dk-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.dk-btn--ghost { background: color-mix(in oklab, var(--color-light) 8%, transparent); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 16%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dk-btn--ghost:hover { background: color-mix(in oklab, var(--color-light) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 24%, transparent); }

/* ---------- la recherche en verre fumé ---------- */
.dk-glass { background: var(--glass); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); }
.dk-search { min-width: 0; padding: 20px; }
@media (min-width: 720px) { .dk-search { padding: 24px; } }
.dk-search__field { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); color: var(--color-ink); font-size: 1rem; }
.dk-search__field svg { flex: none; color: var(--color-muted); }
.dk-caret { width: 1.5px; height: 18px; margin-left: -8px; background: var(--color-accent); }
.dk-search__meta { margin: 20px 4px 8px; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }
.dk-rows { display: grid; }
.dk-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 4px; border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.dk-row:first-child { border-top: 0; }
.dk-cover { grid-row: span 2; width: 36px; height: 50px; border-radius: 4px; background: var(--color-cover-1); box-shadow: inset 3px 0 0 color-mix(in oklab, var(--color-shade) 30%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); }
@media (min-width: 560px) { .dk-cover { grid-row: auto; } }
.dk-cover--2 { background: var(--color-cover-2); } .dk-cover--3 { background: var(--color-cover-3); } .dk-cover--4 { background: var(--color-cover-4); }
.dk-row__t { min-width: 0; font-weight: 500; font-size: 0.9375rem; line-height: 1.3; color: var(--color-ink); }
.dk-row__t small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); }
.dk-fmt { justify-self: end; padding: 4px 8px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 6%, transparent); font-size: 0.8125rem; color: var(--color-ink-2); }
.dk-ok { display: none; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-accent); }
@media (min-width: 560px) {
  .dk-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
  .dk-ok { display: inline-flex; }
}

/* ---------- lire : un puits d'os, une carte blanche ---------- */
.dk-read { padding-block: clamp(72px, 10vw, 128px); }
.dk-read__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 960px) { .dk-read__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.dk-read h2 { max-width: 16ch; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.08; font-weight: var(--display-weight); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.dk-read__text > p:not(.dk-actions, .dk-access) { max-width: 46ch; margin-top: 16px; font-size: 1.0625rem; color: var(--color-ink-2); }
.dk-well { display: grid; place-items: center; aspect-ratio: 5 / 4; padding: clamp(20px, 5vw, 48px); border-radius: var(--radius-card); background: var(--color-well); }
.dk-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 24px; width: min(100%, 440px); padding: 20px; border-radius: var(--radius-inner); background: var(--color-card); color: var(--color-well-ink); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-shade) 10%, transparent), 0 18px 40px -20px color-mix(in oklab, var(--color-shade) 35%, transparent); }
.dk-card__cover { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; padding: 16px 12px; border-radius: 4px; background: var(--color-cover-1); color: var(--color-cover-ink); box-shadow: inset 4px 0 0 color-mix(in oklab, var(--color-shade) 28%, transparent); font: 500 0.9375rem/1.15 var(--font-display); }
.dk-card__cover small { font: 400 0.75rem/1 var(--font-body); color: color-mix(in oklab, var(--color-cover-ink) 75%, transparent); }
.dk-card__body { display: flex; flex-direction: column; min-width: 0; }
.dk-card__k { font-size: 0.8125rem; font-weight: 500; color: var(--color-well-muted); }
.dk-card__t { margin-top: 8px; font: 500 1.0625rem/1.25 var(--font-display); color: var(--color-well-ink); }
.dk-card__a { margin-top: 2px; font-size: 0.875rem; color: var(--color-well-muted); }
.dk-progress { position: relative; height: 4px; margin-top: auto; border-radius: var(--radius-pill); background: var(--color-well-2); overflow: clip; }
.dk-progress span { position: absolute; inset: 0; border-radius: inherit; background: var(--color-accent-deep); transform: scaleX(0.265); transform-origin: left; }
.dk-card__p { margin-top: 8px; font-size: 0.8125rem; color: var(--color-well-muted); font-variant-numeric: tabular-nums; }
.dk-pill { align-self: start; margin-top: 16px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-well-ink); font-size: 0.8125rem; font-weight: 600; }

body[data-theme="dusk"] .site-footer a { color: var(--color-ink-2); }

/* ---------- mouvement ---------- */
@keyframes dk-drift { from { transform: scale(1.06) translateX(0); } to { transform: scale(1.06) translateX(-3%); } }
@keyframes dk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dk-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js .dk-hero__photo img { animation: dk-drift 48s var(--ease-in-out) infinite alternate; }
  .js .dk-row { animation: dk-rise 420ms var(--ease-out) both; animation-delay: calc(300ms + var(--i) * 110ms); }
  .js .dk-caret { animation: dk-blink 1s steps(2) infinite; }
}

/* ---------- films ---------- */
.dk-hero--films .dk-hero__photo img { object-position: 50% 50%; filter: contrast(1.04) saturate(1.03) brightness(0.85); }
.dk-state { display: inline-flex; align-items: center; gap: 8px; justify-self: end; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.dk-state--done { color: var(--color-accent); }
.dk-state--wait { color: var(--color-accent-2); }
.dk-card--wide { grid-template-columns: minmax(0, 1fr); gap: 16px; width: min(100%, 400px); }
.dk-card__still { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 16px; border-radius: 6px; color: var(--color-cover-ink); font: 500 1rem/1.15 var(--font-display);
  background: radial-gradient(ellipse 70% 90% at 70% 30%, var(--color-cover-3), transparent 70%), linear-gradient(160deg, var(--color-cover-4), var(--color-shade)); }
.dk-card--wide .dk-progress { margin-top: 16px; }
.dk-progress--film span { transform: scaleX(0.4); }

/* ---------- voyage et famille ---------- */
.dk-hero--voyage .dk-hero__photo img { object-position: 50% 45%; filter: contrast(1.04) saturate(0.9) brightness(0.62); }
.dk-hero--famille .dk-hero__photo img { object-position: 50% 60%; filter: contrast(1.04) saturate(1.03) brightness(0.68); }
.dk-row:has(.dk-chip), .dk-row:has(.dk-avatar) { grid-template-columns: 36px minmax(0, 1fr) auto; }
.dk-chip, .dk-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 12%, transparent); font-weight: 600; font-size: 0.875rem; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.dk-avatar--1 { background: var(--color-cover-1); } .dk-avatar--2 { background: var(--color-cover-2); } .dk-avatar--3 { background: var(--color-cover-3); } .dk-avatar--4 { background: var(--color-cover-4); }
.dk-avatar { color: var(--color-cover-ink); box-shadow: none; }
.dk-state--todo { color: var(--color-muted); }
.dk-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.dk-tally { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 12px; margin: 8px 4px 0; padding-top: 16px; border-top: 1px solid color-mix(in oklab, var(--color-light) 10%, transparent); font-size: 0.875rem; color: var(--color-muted); }
@media (min-width: 560px) { .dk-tally { display: flex; gap: 12px; } .dk-tally > span:nth-child(3) { margin-left: auto; } }
.dk-tally__v { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-card__map { aspect-ratio: 16 / 8; border-radius: 6px; background: var(--color-well-2); }
.dk-card__map svg { display: block; width: 100%; height: 100%; }
.dk-map__done { stroke: var(--color-accent-deep); stroke-width: 3; }
.dk-map__next { stroke: var(--color-well-muted); stroke-width: 2; stroke-dasharray: 4 6; }
.dk-map__pt { fill: var(--color-card); stroke: var(--color-accent-deep); stroke-width: 2.5; }
.dk-map__pt--todo { stroke: var(--color-well-muted); }
.dk-map__here { fill: var(--color-accent-2); stroke: var(--color-card); stroke-width: 3; }
.dk-progress--trip span { transform: scaleX(0.4); }
.dk-card__wave { display: flex; align-items: center; gap: 4px; height: 96px; padding: 0 16px; border-radius: 6px; background: var(--color-well-2); }
.dk-card__wave span { flex: 1; height: calc(var(--a) * 100%); border-radius: var(--radius-pill); background: var(--color-well-muted); opacity: 0.45; }
.dk-card__wave span:nth-child(-n+13) { background: var(--color-accent-deep); opacity: 1; }
.dk-progress--voice span { transform: scaleX(0.36); }

/* ---------- films : boutons mis en avant, les deux applications ---------- */
.dk-btn svg { flex: none; margin-right: 12px; }
.dk-btn--lg { min-height: 56px; padding: 0 28px 0 24px; font-size: 1.0625rem; }
.dk-btn--light { background: var(--color-ink); color: var(--color-paper); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 50%, transparent); }
.dk-btn--light:hover { background: var(--color-light); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-light) 18%, transparent); }
.dk-actions--stack { flex-direction: column; align-items: stretch; max-width: 340px; }
.dk-actions--stack .dk-btn { justify-content: flex-start; }
@media (max-width: 479px) { .dk-actions--stack { max-width: none; } }

.dk-apps { display: grid; gap: 12px; min-width: 0; padding: 20px; }
@media (min-width: 720px) { .dk-apps { padding: 24px; } }
.dk-apps__head { margin: 0 4px 4px; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }
.dk-app { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; padding: 20px; border-radius: 14px; background: color-mix(in oklab, var(--color-light) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 8%, transparent); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) linear, box-shadow var(--dur-micro) linear; }
.dk-app:hover { background: color-mix(in oklab, var(--color-light) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.dk-app:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.dk-app__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in oklab, var(--color-accent) 18%, transparent); color: var(--color-accent-hi); }
.dk-app__body { display: grid; gap: 4px; min-width: 0; }
.dk-app__name { font: 500 1.25rem/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.dk-app__what { font-size: 0.9375rem; line-height: 1.45; color: var(--color-ink-2); }
.dk-app__demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dk-mini-field { padding: 4px 12px; border-radius: 8px; background: color-mix(in oklab, var(--color-light) 8%, transparent); font-size: 0.8125rem; color: var(--color-ink); }
.dk-mini-state { font-size: 0.8125rem; font-weight: 500; }
.dk-mini-state--wait { color: var(--color-accent-2); }
.dk-mini-state--done { color: var(--color-accent); }
.dk-mini-state--wait::after { content: ""; display: inline-block; width: 16px; height: 1px; margin: 0 0 4px 8px; background: var(--color-muted); }
.dk-poster { width: 32px; aspect-ratio: 2 / 3; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); }
.dk-poster.dk-cover--1 { background: var(--color-cover-1); } .dk-poster.dk-cover--2 { background: var(--color-cover-2); } .dk-poster.dk-cover--3 { background: var(--color-cover-3); } .dk-poster.dk-cover--4 { background: var(--color-cover-4); }
.dk-app__go { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.9375rem; font-weight: 600; }
.dk-app:hover .dk-app__go { background: var(--color-accent-hi); }
@media (prefers-reduced-motion: reduce) { .dk-app, .dk-btn { transition: none; } }