/* chezmaurice.eu — the home page, after chrome.css (the colours, the
   navigation, the footer). Since 6 November 2026 it is short and still: one
   paragraph that says what Maurice is, a picture, and plain links to the
   pages that say more. Nothing on it moves. The other pages keep home.css.
   Colours come from chrome.css's tokens, so the theme switch and the dark
   mode reach this page as they reach the others. */
main {
  --text: "Geist", var(--sans);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
}
main h1, main h2, main p { margin: 0; }
main em { font-style: italic; }

.page { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.label { font-family: var(--text); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }

/* ---------- buttons ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--page); font-size: 16px; font-weight: 500;
  padding: 14px 22px; border-radius: 8px;
}
.cta:hover { background: var(--ink-2); color: var(--page); text-decoration: none; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- the paragraph ---------- */
.intro { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); }
.statement {
  max-width: 1120px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: pretty;
}
.statement b { font-weight: 600; }
.statement a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.statement a:hover { text-decoration-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(28px, 3vw, 40px); }
.fine { margin-top: 16px; font-size: 14px; color: var(--muted); }
.fine span { color: var(--ink); }

/* ---------- the picture ---------- */
.picture { border-radius: 14px; overflow: hidden; background: var(--band); }
.picture img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; max-height: 52vh; object-fit: cover; object-position: 50% 62%; }
/* Europe in cubes: drawn on a transparent ground, one picture per theme. */
.picture.europe img { aspect-ratio: 2 / 1; max-height: 64vh; object-fit: contain; object-position: 50% 50%; }
.picture.europe img.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .picture.europe img.light { display: none; }
  :root:not([data-theme="light"]) .picture.europe img.dark { display: block; }
}
:root[data-theme="dark"] .picture.europe img.light { display: none; }
:root[data-theme="dark"] .picture.europe img.dark { display: block; }

/* ---------- the picture, the apps, the way in ----------
   On a wide screen the map keeps its 2:1 frame; the way in (price and the two
   buttons) sits on the Atlantic, and the two apps stand on the faded east,
   one a little lower than the other: Maurice in its light theme, Carnet in
   its dark one, whatever the theme of the page. Below 900px they fall back under the map
   (the phone layout is still to do). */
.hero-visual { position: relative; }
/* The second phone and the two signatures reach about 70px below the map. */
@media (min-width: 901px) { .hero-visual { padding-bottom: 72px; } main .carnet { margin-top: clamp(32px, 3vw, 48px); } }
.hero-visual .picture { border-radius: 0; background: none; }
.offer {
  position: absolute; left: 0; top: 22%; width: min(28%, 330px);
  padding: 22px 22px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35);
}
.offer .price { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink-2); }
.offer .price b { font-weight: 500; font-size: 46px; letter-spacing: -0.02em; color: var(--ink); }
.offer .who { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.offer .who a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.offer .actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
.offer .cta { padding: 14px 10px; white-space: nowrap; }
.offer .actions .link { text-align: center; font-size: 15px; }
.offer .fine { margin-top: 14px; font-size: 13.5px; line-height: 1.5; }
.shots {
  position: absolute; right: 5%; top: 0; margin: 0; width: 45%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5%; align-items: start;
}
.phone { display: block; }
.phone > img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 1px solid var(--line); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .45);
}
.phone + .phone { margin-top: 18%; }
/* Which app is which: the icon, the name, and what it is for. */
.sign {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 6px 14px 6px 6px;
  border-radius: 12px; background: color-mix(in srgb, var(--page) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 15px; color: var(--ink-2); white-space: nowrap;
}
.sign img { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .45); }
.sign b { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
@media (min-width: 901px) {
  .hero-visual .picture.europe img { max-height: none; }
}
.sign .sep { font-style: normal; }
/* Narrower than 900px: the map, then the two apps rising over its lower edge
   (Paris stays clear above them), then the way in, full width. */
@media (max-width: 900px) {
  .hero-visual { display: flex; flex-direction: column; }
  .hero-visual .picture.europe img { aspect-ratio: 6 / 5; max-height: none; object-fit: cover; object-position: 40% 50%; }
  .shots { position: relative; right: auto; top: auto; order: 1; width: 100%; max-width: 560px; margin: -34% auto 0; gap: 4%; }
  .offer { position: static; order: 2; width: 100%; max-width: 560px; margin: 28px auto 0; }
  .offer .cta { padding: 15px 12px; }
  .sign { gap: 8px; padding: 5px 10px 5px 5px; margin-bottom: 10px; border-radius: 10px; }
  .sign img { width: 28px; height: 28px; border-radius: 7px; }
  .sign .sep { display: none; }
  .sign > span { display: flex; flex-direction: column; line-height: 1.15; font-size: 12.5px; }
  .sign b { font-size: 17px; }
  .phone > img { border-radius: 18px; }
}
.swipe { display: none; }
/* A phone: one app at a time, on the map. The track scrolls sideways (swipe,
   or the arrow beside each phone, see shots.js); each slide centres its phone. */
@media (max-width: 600px) {
  .shots {
    display: flex; gap: 0; margin-top: -74%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .shots::-webkit-scrollbar { display: none; }
  .phone { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 28px; }
  .phone + .phone { margin-top: 0; }
  .phone > img { width: 64%; }
  .sign { align-self: center; }
  .swipe {
    position: absolute; top: 50%; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); color: var(--ink);
    background: color-mix(in srgb, var(--page) 88%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45);
  }
  .swipe[hidden] { display: none; }
  .swipe.next { right: 2%; }
  .swipe.prev { left: 2%; }
  /* The map sits almost wholly behind the phone: only Paris shows, on the
     left. It is 32px wider than the page and pans a little as the apps are
     swiped (shots.js sets --pan), a light horizontal parallax. */
  main { overflow-x: clip; }
  .hero-visual .picture { position: relative; aspect-ratio: 6 / 5; overflow: visible; margin-left: -24px; }
  .hero-visual .picture.europe img {
    position: absolute; left: 0; top: 0; width: calc(100% + 32px); max-width: none; height: 100%; aspect-ratio: auto;
    object-position: 91% 50%; transform: translate(var(--pan, 0px), 40px); will-change: transform;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-visual .picture.europe img { aspect-ratio: 3 / 2; }
  .shots { margin-top: -24%; }
}

/* ---------- Carnet ---------- */
.carnet { margin-top: clamp(48px, 6vw, 88px); padding: clamp(48px, 6vw, 88px) 0; background: var(--band); }
.carnet .page { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.carnet .statement { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; max-width: 1000px; }
.carnet .link { font-size: 16px; }
.carnet .actions { margin-top: 4px; }
.app { display: flex; align-items: center; gap: 16px; }
.app img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.app b { display: block; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; }
.app span { font-size: 14px; color: var(--muted); }
.store { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 8px; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 500; }
.store:hover { background: var(--ink-2); color: var(--page); text-decoration: none; }

/* ---------- the links ---------- */
.paths { padding: clamp(48px, 6vw, 88px) 0; }
.paths .label { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.path {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 0 24px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.path b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.path b::after { content: " →"; color: var(--muted); }
.path span { color: var(--ink-2); font-size: 15.5px; max-width: 34em; }
.path:hover { text-decoration: none; }
.path:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- the founder's word ---------- */
.word { padding: 0 0 clamp(56px, 6vw, 96px); }
.word p { max-width: 860px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; }
.word span { display: block; margin-top: 8px; font-family: var(--text); font-style: normal; font-size: 14px; color: var(--muted); }

/* ---------- come in, and the apps ----------
   On the page's own colour, so that the footer's cubes rise out of it with
   nothing in between. */
.door { padding: clamp(56px, 6vw, 96px) 0 clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.door .page { display: flex; flex-direction: column; gap: 40px; }
.door-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.door h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.02em; max-width: 620px; }
.door-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.door-cta a:not(.cta) { font-size: 14px; }
.apps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.apps a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; background: var(--card); }
.apps a:hover { background: var(--band); text-decoration: none; color: var(--ink); }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-visual .picture { margin-left: -16px; }
  .page { padding: 0 16px; }
  .grid { grid-template-columns: 1fr; }
  .actions { flex-direction: column; align-items: flex-start; }
  .path b { font-size: 22px; }
  .picture img { aspect-ratio: 4 / 3; object-position: 58% 60%; }
  .picture.europe img { object-fit: cover; object-position: 54% 50%; }
}