@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/newsreader.woff2) format("woff2") }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 400; font-display: swap; src: url(/fonts/newsreader-italic.woff2) format("woff2") }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/hanken-grotesk.woff2) format("woff2") }
/* Layout: one stone slab. Hero = huge serif invitation over a waterline wave that answers both voices;
   below, a left-aligned editorial column with a wide right margin for receipts and notes. */
:root {
  --basalt: #181a1b;      /* Agde volcanic stone */
  --basalt-2: #202325;    /* raised slab */
  --pore: #2e3235;        /* vesicle lines, rules */
  --salt: #ecebe6;        /* salt-white type, the caller's voice */
  --mist: #9aa0a2;        /* secondary text */
  --etang: #6cb0cf;       /* étang de Thau, the agent's voice */
  --etang-deep: #2b5568;
  --pending: #d9b56c;     /* semantic: awaiting approval */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --step--1: .875rem; --step-0: 1.0625rem; --step-1: 1.33rem; --step-2: 1.77rem; --step-3: 2.6rem;
  --measure: 34rem;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  background: var(--basalt); color: var(--salt);
  font: 400 var(--step-0)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
body::after { /* stone texture, generated in script */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--stone, none); opacity: .55; mix-blend-mode: soft-light;
}
.wrap { position: relative; z-index: 1; max-width: 76rem; margin: 0 auto }
a { color: inherit }
:focus-visible { outline: 2px solid var(--etang); outline-offset: 3px; border-radius: 2px }
[data-l] { display: contents }
:root[data-lang="fr"] [data-l="en"], :root[data-lang="en"] [data-l="fr"] { display: none }

/* Header */
.top { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.25rem; font-size: var(--step--1); color: var(--mist) }
.mark { font: 500 1.05rem/1 var(--serif); color: var(--salt); text-decoration: none; letter-spacing: .01em }
.top nav { display: flex; gap: 1.25rem; margin-left: auto }
.top nav a { text-decoration: none }
.top nav a:hover { color: var(--salt) }
.lang { display: inline-flex; border: 1px solid var(--pore); border-radius: 99px; padding: 2px }
.lang button { all: unset; cursor: pointer; padding: .2rem .6rem; border-radius: 99px; font-size: .8rem }
.lang button[aria-pressed="true"] { background: var(--salt); color: var(--basalt) }
.clock { font-variant-numeric: tabular-nums }
@media (max-width: 760px) { .top nav, .clock { display: none } .lang { margin-left: auto } }

/* Hero */
.hero { position: relative; padding-block: clamp(2rem, 7vw, 5.5rem) 0 }
.hero h1 {
  font: 300 clamp(4.2rem, 15.5vw, 13.5rem)/.86 var(--serif);
  font-variation-settings: "opsz" 72; letter-spacing: -.035em; margin: 0;
}
.hero h1 .w { display: inline-block; transform: translateY(.5em); opacity: 0; animation: rise 1s cubic-bezier(.2,.7,.1,1) forwards }
.hero h1 .w:nth-child(2) { animation-delay: .12s }
@keyframes rise { to { transform: none; opacity: 1 } }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; margin-top: clamp(1.5rem, 4vw, 2.75rem) }
.lede { font: 400 var(--step-1)/1.45 var(--serif); max-width: 30rem; margin: 0; color: var(--salt) }
.lede em { color: var(--mist); font-style: italic }
.call { display: flex; align-items: center; gap: 1.1rem }
.call-btn {
  all: unset; cursor: pointer; width: 5.75rem; height: 5.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--etang); color: var(--basalt);
  box-shadow: 0 0 0 0 rgba(108,176,207,.45); transition: transform .2s, background .2s;
}
.call-btn:hover { transform: scale(1.04) }
.call-btn:focus-visible { outline: 2px solid var(--salt); outline-offset: 5px }
.call-btn svg { width: 2rem; height: 2rem }
.call-btn.live { background: var(--salt); animation: halo 1.6s ease-out infinite }
@keyframes halo { to { box-shadow: 0 0 0 1.4rem rgba(108,176,207,0) } }
.call-text strong { display: block; font-weight: 500 }
.call-text span { font-size: var(--step--1); color: var(--mist) }
@media (max-width: 760px) { .hero-row { grid-template-columns: 1fr } }

.wave-box { position: relative; height: clamp(150px, 22vw, 240px); margin-top: 1.5rem; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) }
#wave { position: absolute; inset: 0; width: 100%; height: 100% }
.wave-legend { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: .5rem; display: flex; gap: 1rem; font-size: .78rem; color: var(--mist) }
.wave-legend i { display: inline-block; width: 1.1rem; height: 2px; vertical-align: middle; margin-right: .4rem; background: var(--salt) }
.wave-legend i.a { background: var(--etang) }

.under { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--step--1); color: var(--mist); padding-block: .75rem 0; border-top: 1px solid var(--pore) }
.under b { color: var(--salt); font-weight: 500 }
.proto { color: var(--pending) }

/* Live call panel */
.live-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem }
.live-panel[hidden] { display: none !important }
.transcript { background: var(--basalt-2); border: 1px solid var(--pore); border-radius: 14px; padding: 1.25rem; min-height: 18rem; max-height: 26rem; overflow-y: auto }
.t-head, .s-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--step--1); color: var(--mist); margin-bottom: 1rem }
.t-timer { font-variant-numeric: tabular-nums; color: var(--salt) }
.turn { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; padding-block: .55rem; animation: fadein .3s ease-out }
@keyframes fadein { from { opacity: 0 } }
.who { font-size: .78rem; color: var(--mist); padding-top: .2rem }
.who .chip { display: inline-block; margin-top: .25rem; padding: 0 .4rem; border: 1px solid var(--pore); border-radius: 4px; font-size: .7rem; letter-spacing: .04em; color: var(--salt) }
.turn.agent .said { font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; color: var(--salt) }
.turn.agent .who { color: var(--etang) }
.turn.caller .said { color: var(--salt); opacity: .86 }
.summary { background: var(--basalt-2); border: 1px solid var(--pore); border-radius: 14px; padding: 1.25rem; align-self: start }
.summary dl { margin: 0; display: grid; gap: .1rem }
.summary .f { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding-block: .5rem; border-top: 1px solid var(--pore); font-size: .95rem }
.summary dt { color: var(--mist) }
.summary dd { margin: 0; min-height: 1.5em; transition: color .4s }
.summary dd:empty::before { content: "…"; color: var(--pore) }
.summary dd.fresh { color: var(--etang) }
@media (max-width: 860px) { .live-panel { grid-template-columns: 1fr } }

/* Editorial sections */
section.s { padding-block: clamp(4rem, 10vw, 8rem) 0 }
.s-title { font: 300 var(--step-3)/1.05 var(--serif); letter-spacing: -.02em; margin: 0 0 1rem; max-width: 22ch; text-wrap: balance }
.s-intro { max-width: var(--measure); color: var(--mist); margin: 0 0 2.5rem }

/* Receipt */
.receipt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start }
.receipt {
  background: var(--salt); color: var(--basalt); border-radius: 4px; padding: 1.75rem 1.75rem 1.25rem;
  font-variant-numeric: tabular-nums; max-width: 30rem; position: relative;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/14px 100%;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/14px 100%;
  padding-bottom: 2rem;
}
.receipt h3 { font: 400 1.5rem/1.1 var(--serif); margin: 0 0 .2rem }
.receipt .sub { font-size: .85rem; opacity: .65; margin: 0 0 1.25rem }
.receipt .row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-top: 1px dashed rgba(24,26,27,.25); font-size: .95rem }
.receipt .row span:first-child { opacity: .7 }
.status { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .35rem .75rem; border-radius: 99px; background: var(--basalt); color: var(--pending); font-size: .85rem }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pending) }
.ex { position: absolute; top: 1.4rem; right: 1.5rem; font-size: .75rem; opacity: .55 }

.latency h4 { font: 500 var(--step-0)/1.3 var(--sans); margin: 0 0 .35rem }
.latency p { color: var(--mist); margin: 0 0 1.5rem; max-width: 30rem; font-size: .95rem }
.lat-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3.2rem; gap: .75rem; align-items: center; margin-bottom: .55rem; font-size: .82rem; color: var(--mist); font-variant-numeric: tabular-nums }
.lat-bar { display: flex; height: .7rem; border-radius: 2px; overflow: hidden; background: var(--basalt-2) }
.lat-bar i { display: block; height: 100% }
.lat-bar .stt { background: var(--mist) }
.lat-bar .llm { background: var(--etang) }
.lat-bar .tts { background: var(--salt) }
.lat-key { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--mist); margin-top: 1rem }
.lat-key i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px }
@media (max-width: 860px) { .receipt-grid { grid-template-columns: 1fr } }

/* Pipeline: a real sequence, so it is numbered */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--pore) }
.pipe li { padding: 1.25rem 1.25rem 1.5rem 0; position: relative }
.pipe li + li { padding-left: 1.25rem; border-left: 1px solid var(--pore) }
.pipe .n { font: 300 2.4rem/1 var(--serif); color: var(--etang) }
.pipe h4 { font: 500 1rem/1.3 var(--sans); margin: .9rem 0 .35rem }
.pipe p { margin: 0; font-size: .9rem; color: var(--mist); line-height: 1.5 }
@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr }
  .pipe li, .pipe li + li { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--pore); display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem }
  .pipe .n { grid-row: span 2 } .pipe h4 { margin-top: .2rem }
}
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem 2.5rem; margin-top: 3rem }
.rules p { margin: 0; font-size: .95rem; color: var(--mist); max-width: 22rem }
.rules b { display: block; color: var(--salt); font-weight: 500; margin-bottom: .2rem }

/* Work index */
.draft-note { display: inline-block; font-size: .82rem; color: var(--pending); border: 1px solid currentColor; border-radius: 99px; padding: .15rem .7rem; margin-bottom: 2rem }
.work { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pore) }
.work li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 8rem; gap: 1.5rem 2.5rem; align-items: baseline; padding-block: 1.75rem; border-bottom: 1px solid var(--pore); transition: background .25s }
.work li:hover { background: linear-gradient(90deg, transparent, var(--basalt-2) 30%, transparent) }
.work h3 { font: 300 clamp(1.5rem, 2.8vw, 2.15rem)/1.15 var(--serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; max-width: 24ch }
.work p { margin: 0; color: var(--mist); max-width: 30rem; font-size: .95rem }
.work .meta { font: 400 1.05rem/1.2 var(--serif); color: var(--salt); text-align: right }
.work .meta a { color: var(--etang); text-decoration: none }
@media (max-width: 760px) { .work li { grid-template-columns: 1fr; gap: .5rem } .work .meta { text-align: left } }

/* About + contact */
.about { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 3/4; max-width: 100%; object-fit: cover; border-radius: 4px; background: var(--basalt-2) }
.about p { font: 400 var(--step-1)/1.55 var(--serif); max-width: var(--measure); margin: 0 0 1.25rem }
.about p.ph { color: var(--mist); font-style: italic }
.facts { margin: 2rem 0 0; display: grid; gap: 0; max-width: var(--measure) }
.facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: .75rem; border-top: 1px solid var(--pore); font-size: .95rem }
.facts dt { color: var(--mist) }
.facts dd { margin: 0 }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: .2rem } }
@media (max-width: 760px) { .about { grid-template-columns: 1fr } .portrait { max-width: 14rem } }

.contact { padding-block: clamp(5rem, 12vw, 9rem) 3rem }
.contact .big { font: 300 clamp(2.4rem, 8vw, 6.5rem)/1 var(--serif); letter-spacing: -.03em; margin: 0 0 2rem; word-break: break-word }
.contact .big a { text-decoration: none; background: linear-gradient(var(--etang), var(--etang)) 0 100%/0 2px no-repeat; transition: background-size .5s }
.contact .big a:hover { background-size: 100% 2px }
.links { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; color: var(--mist); font-size: .95rem }
.links b { color: var(--salt); font-weight: 500 }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem; border-top: 1px solid var(--pore); color: var(--mist); font-size: .82rem }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .w { animation: none; opacity: 1; transform: none }
  .call-btn.live { animation: none }
  html { scroll-behavior: auto }
}