/*
 * Court Libre. Follows DESIGN.md. The palette comes from the hero photo, a Paris court at
 * dusk: warm cream page (60%), clay and dusk navy (30%), ball yellow on calls to action (10%).
 * One display face, Bungee (capitals, like court signage), used only for the wordmark and titles.
 */
@font-face {
  font-family: "Bungee";
  src: url("/bungee.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #fbf6ef;
  --band: #f5e9dd;
  --surface: #fffdf9;
  --ink: #1e2238;
  --ink-soft: #5e5750;
  --line: rgb(94 70 50 / 16%);
  --clay: #bf4e26;
  --clay-ink: #ffffff;
  --ball: #ddf25a;
  --ball-hover: #cfe64a;
  --ball-ink: #1e2238;
  --bot: #f4ebe1;
  --user: #bf4e26;
  --user-ink: #ffffff;
  --focus: rgb(191 78 38 / 28%);
  --dusk: #161a2b;
  --court: #bf4e26;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Dark follows the system unless the header button (theme.js) picked a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161a2b;
    --band: #1c2135;
    --surface: #1f2438;
    --ink: #f6efe6;
    --ink-soft: #c2b8ac;
    --line: rgb(246 239 230 / 13%);
    --clay: #e0764b;
    --clay-ink: #1e2238;
    --bot: #272d45;
    --user: #e0764b;
    --user-ink: #1e2238;
    --focus: rgb(224 118 75 / 35%);
    --court: #8f3a1d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161a2b;
  --band: #1c2135;
  --surface: #1f2438;
  --ink: #f6efe6;
  --ink-soft: #c2b8ac;
  --line: rgb(246 239 230 / 13%);
  --clay: #e0764b;
  --clay-ink: #1e2238;
  --bot: #272d45;
  --user: #e0764b;
  --user-ink: #1e2238;
  --focus: rgb(224 118 75 / 35%);
  --court: #8f3a1d;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type scale: four sizes. Titles are Bungee capitals; everything else is the system face. */
.t-display, .t-title, .brand, .steps .num {
  font-family: "Bungee", "Arial Black", ui-sans-serif, sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: 0;
}
.t-display { font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.08; }
.t-display em { font-style: normal; color: var(--clay); }
.t-title { font-size: 1.25rem; line-height: 1.2; }
.t-body { font-size: 1.125rem; color: var(--ink-soft); max-width: 30rem; }
.t-small { font-size: 0.875rem; color: var(--ink-soft); }

.wrap { max-width: 72rem; width: 100%; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 640px) { .wrap { padding-inline: 24px; } }

/* Buttons: solid for actions, text links for everything else. */
.primary {
  height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--ball); color: var(--ball-ink); font-weight: 700; cursor: pointer;
  transition: background-color 120ms, transform 120ms;
}
.primary:hover { background: var(--ball-hover); }
.primary:active { transform: scale(0.98); }
.primary:disabled { opacity: 0.6; cursor: default; transform: none; }
.primary:focus-visible, .link:focus-visible, .examples button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 2px;
}
.link { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.link:hover { text-decoration-color: currentColor; }
/* Clay buttons: actions that are not a search (save, upgrade). Ball yellow stays for searching. */
.solid {
  height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--clay); color: var(--clay-ink); font-weight: 700; cursor: pointer;
  transition: opacity 120ms, transform 120ms;
}
.solid:hover { opacity: 0.9; }
.solid:active { transform: scale(0.98); }
.solid:disabled { opacity: 0.6; cursor: default; transform: none; }
.solid:focus-visible, .tabs a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.danger { color: var(--clay); }

.top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ball { width: 26px; height: 26px; }
.ball circle { fill: var(--clay); }
.ball path { fill: none; stroke: #fff; stroke-width: 2; }
.account { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; color: var(--ink-soft); min-width: 0; }
.account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account:empty { display: none; }
.theme {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.theme:hover { border-color: var(--clay); color: var(--clay); }
.theme:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The button shows the theme it switches to: a moon on light, a sun on dark. */
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
.tabs + .top-right { margin-left: 8px; }
.chat-head a, .foot a { color: inherit; text-underline-offset: 3px; }

/* Signed in: three tabs in the header. */
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a {
  padding: 8px 12px; border-radius: 10px; color: var(--ink-soft); font-weight: 600;
  font-size: 0.95rem; text-decoration: none; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--band); color: var(--ink); }
.tabs .short { display: none; }

/* Alerts and account views replace the landing page below the header. */
body[data-view="alertes"] main > :not(#view-alertes),
body[data-view="compte"] main > :not(#view-compte) { display: none; }
.view { padding-block: 24px 80px; max-width: 44rem; display: grid; gap: 28px; align-content: start; }
.view-head { display: grid; gap: 10px; }
.view .t-body { font-size: 1.0625rem; }

.upsell {
  background: var(--band); border-radius: 14px; padding: 20px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
}
.upsell-copy { display: grid; gap: 4px; }
.upsell-copy p:not(.upsell-title) { color: var(--ink-soft); font-size: 0.95rem; }
.upsell-title { font-weight: 700; font-size: 1.05rem; }
.upsell-action { display: grid; gap: 6px; justify-items: end; flex: none; }
.upsell-action .t-small:empty { display: none; }

.alert-list { display: grid; gap: 20px; }
.alert-items { list-style: none; margin: 0; padding: 0; }
.alert-items:empty { display: none; }
.alert-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.alert-item:first-child { border-top: 1px solid var(--line); }
.alert-summary { display: grid; gap: 2px; min-width: 0; }
.alert-when { font-weight: 700; }
.alert-where { color: var(--ink-soft); font-size: 0.95rem; overflow-wrap: anywhere; }
.alert-state { color: var(--clay); font-size: 0.875rem; font-weight: 600; }
.alert-actions { display: flex; gap: 20px; flex: none; }
.alert-list .t-small:empty { display: none; }

.alert-form { display: grid; gap: 28px; }
.form-title { font-size: 1.25rem; font-weight: 700; }
.alert-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.alert-form legend { font-weight: 700; font-size: 1.125rem; padding: 0; margin-bottom: 2px; }
.hint { color: var(--ink-soft); font-size: 0.9rem; margin-top: -6px; }
.alert-form .link { justify-self: start; }
.field, .slot select {
  height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
  background: var(--surface); font-size: 16px; outline: none; min-width: 0;
}
.field:focus, .slot select:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--focus); }
.slots { display: grid; gap: 8px; }
.slot { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem auto 5.5rem auto; align-items: center; gap: 8px; }
.slot span { color: var(--ink-soft); }
.slot .link { font-size: 0.875rem; margin-left: 4px; }

.centres {
  max-height: 16rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 4px;
}
.check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.centres .check:hover { background: var(--band); }
.check input { width: 18px; height: 18px; accent-color: var(--clay); flex: none; margin: 0; }
.check small { color: var(--ink-soft); margin-left: auto; }
.check:has(input:disabled) { opacity: 0.5; cursor: default; }
.alert-form > fieldset > .check { padding-inline: 0; }
.alert-form fieldset .check + .check { margin-top: -10px; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.facts { margin: 0; display: grid; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts div:first-child { border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.acct-actions { display: flex; gap: 24px; flex-wrap: wrap; }
.msg-action { align-self: flex-start; margin-top: -2px; font-size: 0.9rem; font-weight: 600; color: var(--clay); text-underline-offset: 3px; }

/* Hero: headline and photo on the left, the live chat (the product) on the right. */
.hero {
  display: grid; gap: 56px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  padding-block: 40px 96px;
}
.hero-main { display: grid; gap: 36px; align-content: start; }
.hero-copy { display: grid; gap: 16px; max-width: 36rem; }
.hero-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--dusk); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; }

.stagger > * { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.stagger > :nth-child(2) { animation-delay: 0.08s; }
.stagger > :nth-child(3) { animation-delay: 0.16s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } }

.chat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column;
  min-height: 520px; max-height: 720px;
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 0.875rem; color: var(--ink-soft);
}
.quota { color: var(--clay); font-weight: 600; white-space: nowrap; }

.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; }
.msg.bot { background: var(--bot); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--user); color: var(--user-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.msg.typing { display: flex; gap: 4px; padding: 14px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.2s infinite both; }
.msg.typing i:nth-child(2) { animation-delay: 0.2s; }
.msg.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.examples { display: grid; gap: 6px; justify-items: start; margin-top: 6px; }
.examples p { margin-bottom: 2px; }
.examples button {
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: 8px 12px; font-size: 0.925rem; text-align: left; cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.examples button:hover { border-color: var(--clay); color: var(--clay); }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.composer textarea, .auth input {
  flex: 1; min-width: 0; width: 100%; height: 48px;
  border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--bg);
  font-size: 16px; outline: none;
}
/* The search box grows with the text (app.js sets its height), up to about five lines. */
.composer textarea { display: block; min-height: 48px; max-height: 148px; padding: 12px 14px; line-height: 22px; resize: none; }
.composer textarea:focus, .auth input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--focus); }
.composer .primary { flex: none; }

.auth { padding: 16px; border-top: 1px solid var(--line); background: var(--band); }
.auth form { display: grid; gap: 10px; }
.auth-title { font-weight: 700; font-size: 1.05rem; }
.auth-sub { margin: -4px 0 2px; color: var(--ink-soft); font-size: 0.9rem; }
.auth .link { justify-self: start; font-size: 0.875rem; }
.auth-error { margin-top: 8px; color: var(--clay); font-size: 0.875rem; font-weight: 600; }
.auth-error:empty { display: none; }

/* Sections below the fold: a title on the left, a short list on the right, grouped by space. */
.section { padding-block: 0 88px; }
.split, .faq-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; }
.steps .num { color: var(--clay); font-size: 1.25rem; }
.steps p { color: var(--ink-soft); font-size: 1.0625rem; max-width: 40rem; }
.steps strong { color: var(--ink); font-weight: 600; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 32px 18px 0; position: relative;
  font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay);
  transform: translateY(-70%) rotate(45deg); transition: transform 150ms;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 32px 20px 0; color: var(--ink-soft); max-width: 40rem; }

/*
 * The closing band is the only decoration on the page: a clay court seen from above. Desktop
 * shows the whole court on the right, beside the words; phones zoom in behind them. The grain is
 * drawn by an SVG filter, no image to load.
 */
.court {
  position: relative; overflow: hidden; border-radius: 14px;
  min-height: 320px; display: grid; align-items: center;
  background-color: var(--court);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .12 0 0 0 0 .05 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.court-lines { position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 2777 / 1497; }
.court-lines rect, .court-lines path { fill: none; stroke: rgb(255 248 238 / 58%); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.court-lines .net { stroke: rgb(30 34 56 / 32%); stroke-width: 4px; }
.court-copy { position: relative; display: grid; gap: 20px; justify-items: start; padding: 48px; }
.court-copy .t-title { color: #fffaf2; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; }

.foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--line); }
.foot a:hover { text-decoration-color: currentColor; }

.foot { padding-block: 28px 40px; border-top: 1px solid var(--line); }
.foot .wrap { display: grid; gap: 6px; }

/* Desktop shows the button's word; phones swap it for a magnifier inside the search box. */
.composer .icon { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 960px) {
  .top { height: 56px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 20px 64px; }

  /*
   * Phones open on the headline and the chat, the one thing to use. The photo follows the chat as
   * a plain picture: no text on it, no dark overlay.
   */
  .hero-main { display: contents; }
  .hero-copy { order: 1; gap: 10px; }
  .hero-copy .t-display { font-size: 1.75rem; line-height: 1.1; }
  .hero-copy .t-body { font-size: 1rem; }
  .chat { order: 2; min-height: 0; max-height: none; }
  .hero-photo { order: 3; aspect-ratio: 4 / 3; }

  .chat-head { padding: 12px 16px; }
  .messages { flex: none; padding: 16px 16px 12px; }

  /* Example requests scroll sideways in one row instead of stacking. */
  .examples {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 4px -16px 0; padding: 2px 16px; scroll-padding-inline: 16px;
  }
  .examples::-webkit-scrollbar { display: none; }
  .examples p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .examples button, .examples .wide-only { display: block; flex: none; white-space: nowrap; }

  /* The search box keeps the full width; the button sits inside its bottom-right corner. */
  .composer { position: relative; display: block; padding: 4px 12px 12px; border-top: 0; }
  .composer textarea { min-height: 74px; padding-right: 60px; border-radius: 14px; font-size: 17px; line-height: 24px; }
  .composer .primary {
    position: absolute; right: 19px; bottom: 19px;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 10px;
  }
  .composer .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .composer .icon { display: block; }

  .section { padding-block: 0 64px; }
  .split, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps p { font-size: 1rem; }
  .court { min-height: 240px; }
  .court-lines { inset: 0; width: 100%; aspect-ratio: auto; }
  .court-copy { padding: 32px 24px; }

  /* Once the conversation starts, the chat takes the whole phone screen, as a sheet under the header. */
  body.chatting { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.chatting .top { flex: none; }
  body.chatting main { flex: 1; min-height: 0; display: flex; }
  body.chatting .hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  body.chatting .chat { flex: 1; min-height: 0; border: 0; border-radius: 14px 14px 0 0; }
  body.chatting .chat-head, body.chatting .messages { padding-inline: 20px; }
  body.chatting .messages { flex: 1; }
  body.chatting .composer { padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.chatting .composer .primary { right: 23px; bottom: calc(19px + env(safe-area-inset-bottom, 0px)); }
  body.chatting .hero-main, body.chatting .section, body.chatting .foot { display: none; }
}

@media (max-width: 640px) {
  .upsell { flex-direction: column; align-items: stretch; }
  .upsell-action { justify-items: stretch; }
  .view { padding-block: 12px 56px; }
  .alert-item { flex-direction: column; align-items: stretch; gap: 10px; }
}

@media (max-width: 480px) {
  /* Phones: the day on its own line, then "de 9h à 12h". */
  .slots { gap: 20px; }
  .slot { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .slot .day { grid-column: 1 / -1; }
  .t-display { font-size: 1.875rem; }
  .t-body { font-size: 1.0625rem; }
  .account span { display: none; }
  .tabs a { padding: 8px; }
  .tabs .long { display: none; }
  .tabs .short { display: inline; }
  body.signed-in .brand { font-size: 0; gap: 0; }
}