/* chezmaurice.eu — what every page shares: the colours, the type, the
   navigation and the footer (chrome.ts draws them). The site's pages load it
   before home.css; the tower's pages (account.chezmaurice.eu) inline it
   before their own rules. A change here reaches both faces. */
:root {
  --ink: #1c1b1a;
  --ink-2: #57534e;
  --muted: #6b655e;
  --page: #faf8f5;
  --band: #f2efe9;
  --well: #f5f3ef;
  --card: #ffffff;
  --line: #e7e2da;
  --avatar: #dcd6cc;
  /* The blue of the European flag (Reflex Blue), and a darker one for hover. */
  --accent: #003399;
  --accent-deep: #00267a;
  --dark: #1c1b1a;
  --dark-card: #2a2926;
  --dark-line: #3a3835;
  --dark-pill: #45423e;
  --dark-ink: #f5f3ef;
  --dark-muted: #bdb6ab;
  /* The same blue, lightened to read on the dark section. */
  --accent-on-dark: #8fa9f0;
  /* The blue as a button's fill, under white text. */
  --accent-fill: #003399;
  --accent-fill-deep: #00267a;
  /* What a text field is drawn on. */
  --field: #ffffff;
  /* The drawings are ink on cream paper, cut out: on the light page they need
     nothing behind them, on the dark one a sheet of their paper. */
  --ill-paper: transparent;
  --cube-veil: 10%;
  --cubes: url("/ill/pattern.webp?v=20261106");
  --ill-pad: 0px;
  --hero-mask: linear-gradient(to right, transparent, #000 9%);
  --serif: "Newsreader", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  color-scheme: light dark;
}

/* The dark theme: the system's choice (prefers-color-scheme) unless the
   visitor picked light, or the visitor's (site/theme.js sets data-theme). The
   two blocks hold the same values; CSS cannot name them once for both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ede9e3; --ink-2: #c4bdb3; --muted: #9c958b;
    --page: #1a1918; --band: #22201e; --well: #2b2927; --card: #252321;
    --line: #3a3734; --avatar: #4a4642;
    --accent: #9db4f5; --accent-deep: #c3d1f8;
    --accent-fill: #2d55c8; --accent-fill-deep: #3f66d6;
    --dark: #0f0e0d; --dark-card: #1e1d1b; --dark-line: #34322f; --dark-pill: #45423e;
    --field: #2b2927;
    --ill-paper: #f4efe6; --ill-pad: 10px; --hero-mask: none;
    --cube-veil: 10%;
    --cubes: url("/ill/pattern-dark.webp?v=20261106");
  }
}
:root[data-theme="dark"] {
    --ink: #ede9e3; --ink-2: #c4bdb3; --muted: #9c958b;
    --page: #1a1918; --band: #22201e; --well: #2b2927; --card: #252321;
    --line: #3a3734; --avatar: #4a4642;
    --accent: #9db4f5; --accent-deep: #c3d1f8;
    --accent-fill: #2d55c8; --accent-fill-deep: #3f66d6;
    --dark: #0f0e0d; --dark-card: #1e1d1b; --dark-line: #34322f; --dark-pill: #45423e;
    --field: #2b2927;
    --ill-paper: #f4efe6; --ill-pad: 10px; --hero-mask: none;
    --cube-veil: 10%;
    --cubes: url("/ill/pattern-dark.webp?v=20261106");
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 500;
}
.btn:hover { text-decoration: none; }
.btn-outline { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--page); }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.ic { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }

/* ---------- nav ---------- */
.nav { height: 96px; margin-bottom: -20px; }
.nav .wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand svg { width: 38px; height: 28px; color: var(--ink); }
.brand-icon { display: block; flex: none; width: 56px; height: 56px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.brand span { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.nav .btn { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.nav-links a:not(.btn) { color: var(--ink); }

/* the menus: a <details> each, unfolded under its label (site/theme.js
   closes the others, and closes them on a click outside or Escape). On a
   narrow screen they give way to a single "Menu" holding them all. */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.menu-list {
  position: absolute; top: calc(100% + 14px); left: -16px; z-index: 20; min-width: 250px;
  display: flex; flex-direction: column; padding: 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .3);
}
.nav-links .menu-list a { padding: 9px 12px; border-radius: 8px; color: var(--ink); white-space: nowrap; }
.nav-links .menu-list a:hover { background: var(--band); text-decoration: none; }
.menu-list p { margin: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.menu-list p:first-child { margin-top: 4px; }
.menu-list p:empty { margin: 6px 12px; border-top: 1px solid var(--line); }
.menu-all { display: none; }
.menu-all .menu-list { left: auto; right: -8px; max-height: calc(100vh - 90px); overflow-y: auto; }

/* the theme switch: shows the state chosen (site/theme.js) */
.theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 -8px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
}
.theme:hover { background: var(--band); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme .ic { display: none; }
:root:not([data-theme-pref]) .theme .t-auto,
[data-theme-pref="auto"] .theme .t-auto,
[data-theme-pref="light"] .theme .t-light,
[data-theme-pref="dark"] .theme .t-dark { display: block; }

/* ---------- the cubes ----------
   The pattern of the apps' icons and sign-in screens (site/ill/pattern.webp,
   a seamless tile), behind the navigation and the footer. A veil of the
   page's colour covers it, light at the outer edge (the top of the page, its
   bottom) and whole toward the middle, so the header and the footer melt into
   the page. --cubes is the tile (the Maurice app's pastel one,
   Carnet's dark one) and --cube-veil the edge, per theme. The tower inlines this file
   and points the address at the site. */
.nav, .foot {
  --edge: color-mix(in srgb, var(--page) var(--cube-veil), transparent);
  background-color: var(--page);
  background-image: linear-gradient(var(--dir), var(--edge), var(--page)), var(--cubes);
  background-size: 100% 100%, 128px;
  background-repeat: no-repeat, repeat;
}
.nav { --dir: to bottom; }
/* iOS Safari paints the strip under the clock, and the one under its toolbar
   at the end of the page, in the page's colour and nothing else (it takes no
   image there). So on an iPhone the cubes of the header and of the footer
   rise out of that colour instead of stopping on a hard line against it.
   iPhone only: touch Safari on a screen at most 440px across one way
   (portrait or landscape), which no iPad and no desktop matches. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 440px), (max-height: 440px) {
    /* The header: a short rise out of the strip, the cubes under a light
       veil along the brand and the menu, then a long fade into the page;
       taller by 40px and pulled up by as much, so nothing moves. The footer
       rises out of its strip into the same veil. */
    .nav, .foot {
      --veil: color-mix(in srgb, var(--page) 25%, transparent);
      background-image: linear-gradient(var(--dir), var(--page), var(--veil) 16px, var(--veil) 62px, var(--page) 136px), var(--cubes);
      background-size: 100% 100%, 128px;
      background-repeat: no-repeat, repeat;
    }
    .nav { height: 136px; margin-bottom: -60px; }
    /* The footer keeps its fade over its whole height, from the same veil. */
    .foot { background-image: linear-gradient(to top, var(--page), var(--veil) 16px, var(--page)), var(--cubes); }
  }
}
.foot { --dir: to top; }

/* ---------- "who sees what", over the page (site/theme.js) ----------
   The section of /memory, in a dialog. Its table reads as on /memory: a grid
   on a wide screen, one card per row on a phone. */
.wsw {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 16px;
  background: var(--page); color: var(--ink); box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .5);
}
.wsw::backdrop { background: rgba(20, 19, 18, .5); }
.wsw-close {
  position: sticky; top: 0; float: right; margin: -12px -12px 0 12px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--band); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.wsw-body { display: flex; flex-direction: column; gap: 18px; }
.wsw h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; }
.wsw h2 em { font-style: italic; }
.wsw .lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 760px; }
.wsw .aside { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.wsw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wsw table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.wsw th, .wsw td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.wsw thead th { font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
.wsw tbody th { font-weight: 600; width: 20%; }
.wsw td { color: var(--ink-2); }
.wsw-foot { margin: 22px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .wsw thead { display: none; }
  .wsw tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .wsw tbody th, .wsw td { display: block; width: auto; border: 0; padding: 4px 0; }
  .wsw tbody th { font-size: 16px; padding-bottom: 6px; }
  .wsw td { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; }
  .wsw td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
}

/* ---------- footer ---------- */
.foot { padding: 64px 0 32px; }
.foot .wrap { display: flex; flex-direction: column; gap: 48px; }
.foot-cols { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 14px; line-height: normal; }
.foot-cols > * { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot-cols h3 { margin: 0; font-size: 13px; font-weight: 600; }
.foot-cols nav a { color: var(--ink-2); }
.foot-brand { gap: 14px; }
.foot-brand .brand span { font-size: 24px; }
.foot-brand .brand svg { width: 30px; height: 22px; }
.foot-brand p { margin: 0; line-height: 1.5; color: var(--ink-2); max-width: 280px; }
.foot-legal {
  display: flex; justify-content: space-between; gap: 16px 24px; padding-top: 24px;
  border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted);
}
.foot-legal p { margin: 0; }
.foot-legal nav { display: flex; gap: 20px; white-space: nowrap; }
.foot-legal a { color: var(--ink-2); }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav-links { gap: 22px; }
  .nav-links .opt { display: none; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-legal { flex-direction: column; }
  .foot-legal nav { flex-wrap: wrap; white-space: normal; gap: 8px 20px; }
}
@media (max-width: 1000px) {
  .brand svg { width: 32px; height: 24px; }
  .brand-icon { width: 48px; height: 48px; border-radius: 11px; }
  .brand span { font-size: 26px; }
}
@media (max-width: 760px) {
  .menu:not(.menu-all), .nav-links a.top { display: none; }
  .menu-all { display: block; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .brand { gap: 8px; }
  .brand svg { width: 30px; height: 22px; }
  .brand-icon { width: 40px; height: 40px; border-radius: 9px; }
  .brand span { font-size: 23px; }
  .nav .btn { padding: 0 14px; }
  .nav-links { gap: 16px; font-size: 14px; }
  .nav-links a.top { display: none; }
}
@media (max-width: 420px) {
  .nav-links { gap: 14px; }
  .nav .btn .lbl { display: none; }
  .nav .btn { padding: 0 11px; }
}