/* ───────────────────────────────────────────────────────────
   Clélia — clelia.app
   Papier chaud, encre, une pointe de bleu curseur.
   Motion : courbes custom, entrées ease-out, rien de superflu.
   ─────────────────────────────────────────────────────────── */

:root {
  --paper: #f6f3ec;
  --paper-deep: #efeadf;
  --ink: #1d1a16;
  --ink-soft: #57514a;
  --ink-faint: #8a837a;
  --line: rgba(29, 26, 22, 0.12);
  --blue: #2f5fe8;
  --blue-soft: rgba(47, 95, 232, 0.12);
  --coral: #e8603c;

  --serif: "Fraunces", "Baskerville", serif;
  --sans: "Manrope", -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  /* courbes fortes — les easings CSS de base manquent de nerf */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blue); color: #fff; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Boutons & liens ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: 600 0.95rem/1 var(--sans);
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--line);
  cursor: default;
}
.btn-ghost:active { transform: none; }
.btn-small { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: #33302b; }
  .btn-paper:hover { background: #fffdf8; }
}

.link-quiet {
  font: 600 0.95rem/1 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .link-quiet:hover { color: var(--ink); border-color: var(--ink); }
}

kbd {
  font: 500 0.85em var(--mono);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.1em 0.45em;
}

/* ─── Header ──────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 5vw, 4rem);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font: italic 600 1.35rem/1 var(--serif);
}
.brand-nib { width: 1.05rem; fill: var(--blue); transform: rotate(12deg); }

.site-nav { display: flex; gap: 1.75rem; }
.site-nav a {
  font: 600 0.9rem/1 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--ink); }
}

/* ─── Hero ────────────────────────────────────────────────── */

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem) 0;
  text-align: center;
}

.hero-mascot {
  width: clamp(84px, 10vw, 110px);
  height: auto;
  margin-bottom: 1.2rem;
}

.eyebrow {
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero h1 {
  font: 500 clamp(3rem, 8.5vw, 5.8rem)/1.04 var(--serif);
  letter-spacing: -0.02em;
  margin: 1.4rem 0 1.6rem;
}
.hero h1 em, h2 em { font-style: italic; color: var(--blue); }

.lede {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.13rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.2rem 0 0;
  flex-wrap: wrap;
}

/* ─── Scène de démo (pur CSS, remplace la vidéo) ─────────── */

.stage {
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 760px;
}

.mac {
  position: relative;
  background: #14120f;
  border-radius: 22px 22px 0 0;
  padding: 0 0 1px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px -30px rgba(29, 26, 22, 0.45);
  overflow: hidden;
}

/* barre des menus + notch */
.menubar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 34px;
  background: #201d19;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.menubar-side {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
}
.menubar-side b {
  width: 13px; height: 13px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}
.menubar-side i {
  width: 22px; height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.menubar-side.right i { width: 12px; }

.notch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  background: #000;
  border-radius: 0 0 12px 12px;
  padding: 0 18px;
}

.notch-word {
  font: italic 500 0.8rem/1 var(--serif);
  color: #d8d3ca;
}

.notch-wave { display: flex; align-items: center; gap: 3px; }
.notch-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--blue);
  animation: wave 1.1s var(--ease-in-out) infinite;
}
.notch-wave i:nth-child(1) { height: 6px;  animation-delay: 0ms; }
.notch-wave i:nth-child(2) { height: 12px; animation-delay: 120ms; }
.notch-wave i:nth-child(3) { height: 8px;  animation-delay: 240ms; }
.notch-wave i:nth-child(4) { height: 13px; animation-delay: 360ms; }
.notch-wave i:nth-child(5) { height: 7px;  animation-delay: 480ms; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

/* bureau */
.desk {
  position: relative;
  height: 320px;
  background: linear-gradient(180deg, #2a2724 0%, #262320 100%);
  overflow: hidden;
}

.fake-window {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: min(78%, 480px);
  background: #f2efe8;
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.fw-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: #e6e1d6;
}
.fw-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cbc4b6; }
.fw-bar span:first-child { background: #e8968a; }

.fw-body { padding: 16px 18px 20px; display: grid; gap: 11px; }
.fw-line {
  height: 9px;
  border-radius: 5px;
  background: #ddd7ca;
}
.w40 { width: 40%; } .w55 { width: 55%; } .w60 { width: 60%; }
.w75 { width: 75%; } .w80 { width: 80%; } .w90 { width: 90%; }

.fw-row { display: flex; align-items: center; gap: 14px; }
.fw-target {
  font: 600 0.78rem/1 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid #d5cfc2;
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  pointer-events: none;
}

/* trace d'encre + curseur : une boucle de 7 s, décorative.
   Le SVG et l'offset-path partagent le MÊME repère 560×300 centré,
   sinon le viewBox se letterboxe et la trace ne suit plus le curseur. */
.ink {
  position: absolute;
  left: calc(50% - 280px);
  top: 0;
  width: 560px;
  height: 300px;
}
.ink-path {
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  opacity: 0;
  animation: ink-draw 7s var(--ease-in-out) infinite;
}
@keyframes ink-draw {
  0%   { stroke-dashoffset: 400; opacity: 0; }
  8%   { opacity: 0.85; }
  34%  { stroke-dashoffset: 0; opacity: 0.85; }
  52%  { stroke-dashoffset: 0; opacity: 0.85; }
  68%  { opacity: 0; }
  100% { stroke-dashoffset: 400; opacity: 0; }
}

.companion {
  position: absolute;
  left: calc(50% - 280px);
  top: 0;
  width: 26px; height: 26px;
  offset-path: path("M40 262 C 150 240, 210 185, 258 166 C 280 158, 292 152, 300 148");
  offset-rotate: auto 90deg;
  animation: companion-fly 7s var(--ease-in-out) infinite;
}
.companion svg { width: 100%; height: 100%; fill: var(--blue); filter: drop-shadow(0 2px 6px rgba(47, 95, 232, 0.5)); }

@keyframes companion-fly {
  0%   { offset-distance: 0%; opacity: 0; }
  4%   { opacity: 1; }
  34%  { offset-distance: 100%; }
  80%  { offset-distance: 100%; opacity: 1; }
  88%  { opacity: 0; }
  100% { offset-distance: 0%; opacity: 0; }
}

/* l'anneau tremblé autour du bouton */
.ring {
  position: absolute;
  width: 150px;
  top: 124px;
  left: calc(50% - 48px);
  overflow: visible;
}
.ring path {
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ring-draw 7s var(--ease-out) infinite;
}
@keyframes ring-draw {
  0%, 33% { stroke-dashoffset: 420; opacity: 1; }
  46%     { stroke-dashoffset: 0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  80%     { opacity: 0; }
  100%    { stroke-dashoffset: 420; opacity: 0; }
}

/* la bulle : entre en scale(0.95)+opacity, jamais depuis rien */
.bubble {
  position: absolute;
  top: 184px;
  left: calc(50% + 44px);
  font: 500 0.82rem/1.3 var(--sans);
  color: #fff;
  background: var(--blue);
  padding: 0.55rem 0.85rem;
  border-radius: 12px 12px 12px 3px;
  transform: scale(0.95);
  opacity: 0;
  transform-origin: 0 0;
  animation: bubble-pop 7s var(--ease-out) infinite;
  box-shadow: 0 10px 24px -10px rgba(47, 95, 232, 0.6);
}
@keyframes bubble-pop {
  0%, 40%  { transform: scale(0.95); opacity: 0; }
  44%      { transform: scale(1); opacity: 1; }
  74%      { transform: scale(1); opacity: 1; }
  80%      { transform: scale(0.97); opacity: 0; }
  100%     { opacity: 0; }
}

/* ─── Ticker ──────────────────────────────────────────────── */

.ticker {
  margin-top: -1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  overflow: hidden;
  padding: 0.85rem 0;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: ticker 26s linear infinite;
}
.ticker-track span {
  font: italic 500 1.05rem/1 var(--serif);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ticker-track b { color: var(--blue); font-weight: 400; }
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ─── Sections communes ───────────────────────────────────── */

section { padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem); }

.index {
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.index.light { color: rgba(246, 243, 236, 0.55); }

h2 {
  font: 500 clamp(2rem, 4.5vw, 3.2rem)/1.12 var(--serif);
  letter-spacing: -0.015em;
}

/* ─── L'idée ──────────────────────────────────────────────── */

.idea { max-width: 1080px; margin: 0 auto; }
.idea-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
  max-width: 56rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ─── Cartes réflexes ─────────────────────────────────────── */

.reflexes { max-width: 1080px; margin: 0 auto; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  position: relative;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -24px rgba(29, 26, 22, 0.25);
  }
}

.card-no {
  font: 500 0.75rem/1 var(--mono);
  color: var(--ink-faint);
}
.card h3 {
  font: 600 1.35rem/1.2 var(--serif);
  margin: 1.1rem 0 0.6rem;
}
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card-word {
  position: absolute;
  right: -0.4rem;
  bottom: -1.6rem;
  font: italic 600 4.2rem/1 var(--serif);
  color: var(--blue-soft);
  pointer-events: none;
}

.card-glyph {
  margin-top: 1.4rem;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.glyph-eye span {
  width: 34px; height: 20px;
  border: 2.5px solid var(--blue);
  border-radius: 50%;
  position: relative;
}
.glyph-eye span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.glyph-wave i {
  width: 4px;
  border-radius: 2px;
  background: var(--coral);
}
.glyph-wave i:nth-child(1) { height: 10px; }
.glyph-wave i:nth-child(2) { height: 22px; }
.glyph-wave i:nth-child(3) { height: 14px; }
.glyph-wave i:nth-child(4) { height: 26px; }
.glyph-wave i:nth-child(5) { height: 12px; }
.glyph-point svg { width: 24px; fill: var(--blue); transform: rotate(14deg); }
.glyph-agents { gap: 2px; }
.glyph-agents svg { width: 16px; fill: var(--blue); }
.glyph-agents svg:nth-child(1) { transform: rotate(-14deg); opacity: 0.45; }
.glyph-agents svg:nth-child(2) { transform: rotate(4deg) translateY(-4px); opacity: 0.7; }
.glyph-agents svg:nth-child(3) { transform: rotate(20deg); }
.glyph-btc {
  font: 600 1.7rem/1 var(--serif);
  color: #d99a1f;
}
.glyph-clock span {
  width: 26px; height: 26px;
  border: 2.5px solid var(--blue);
  border-radius: 50%;
  position: relative;
}
.glyph-clock span::before,
.glyph-clock span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--blue);
  border-radius: 1px;
  transform-origin: 0 0;
}
.glyph-clock span::before { width: 2px; height: 8px; transform: rotate(180deg); }
.glyph-clock span::after { width: 2px; height: 6px; transform: rotate(-60deg); }

/* ─── Manifesto ───────────────────────────────────────────── */

.manifesto {
  text-align: center;
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.manifesto blockquote p {
  font: 500 clamp(2.4rem, 6vw, 4.2rem)/1.1 var(--serif);
  letter-spacing: -0.02em;
}
.manifesto blockquote em { font-style: italic; color: var(--blue); }
.manifesto-sub {
  max-width: 30rem;
  margin: 1.6rem auto 0;
  color: var(--ink-soft);
}

/* ─── Au quotidien ────────────────────────────────────────── */

.daily { max-width: 1080px; margin: 0 auto; }
.daily-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.daily-list { list-style: none; }
.daily-list li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 0.25rem;
  border-bottom: 1px solid var(--line);
}
.daily-list li:first-child { border-top: 1px solid var(--line); }
.daily-mark {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font: italic 600 1rem/1 var(--serif);
  color: var(--blue);
  background: #fffdf8;
}
.daily-list h3 { font: 600 1.1rem/1.3 var(--sans); }
.daily-list p { color: var(--ink-faint); font-size: 0.9rem; }

.daily-note {
  position: relative;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem 1.6rem;
  transform: rotate(1.2deg);
  box-shadow: 0 24px 48px -30px rgba(29, 26, 22, 0.3);
}
/* Clélia pointe la liste depuis le coin de la note */
.note-mascot {
  position: absolute;
  top: -58px;
  left: -46px;
  width: 96px;
  height: auto;
  transform: rotate(-4deg);
}

.note-kicker {
  font: 500 0.75rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.note-quote {
  font: italic 500 1.5rem/1.3 var(--serif);
  margin: 0.9rem 0 1.2rem;
}
.note-answer {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--blue-soft);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.note-avatar {
  flex: none;
  width: 1.8rem; height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
}
.note-avatar svg { width: 0.85rem; fill: #fff; transform: rotate(14deg); }
.note-answer p { font-size: 0.92rem; color: var(--ink); }
.note-scribble {
  position: absolute;
  right: 1.4rem;
  bottom: -0.9rem;
  font: italic 600 1.5rem/1 var(--serif);
  color: var(--coral);
  transform: rotate(-6deg);
}

/* ─── Open source ─────────────────────────────────────────── */

.open { max-width: 1080px; margin: 0 auto; }
.open-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.open-copy h2 em { color: #9db4f5; }
.open-copy > p {
  margin: 1.2rem 0 1.8rem;
  color: rgba(246, 243, 236, 0.7);
  max-width: 26rem;
}

.open-code {
  font: 400 0.9rem/1.7 var(--mono);
  background: #14120f;
  border: 1px solid rgba(246, 243, 236, 0.1);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  overflow-x: auto;
}
.open-code .c { color: #7a746b; }
.open-code .k { color: #d98d6a; }
.open-code .t { color: #9db4f5; }
.open-code .s { color: #a8c496; }
.open-code .m { color: #e8c47a; }
.caret {
  color: var(--blue);
  animation: caret-blink 1.1s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ─── Download ────────────────────────────────────────────── */

.download {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.download-mascot {
  width: clamp(88px, 9vw, 108px);
  height: auto;
  margin-bottom: 1.4rem;
}

.download > p {
  max-width: 28rem;
  margin: 1.4rem auto 2rem;
  color: var(--ink-soft);
}
.download-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ─── Footer ──────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}
.footer-line { font: italic 500 1rem/1 var(--serif); color: var(--ink-soft); }
.footer-credit { font-size: 0.8rem; color: var(--ink-faint); }
.footer-credit a { color: var(--ink-soft); }

/* ─── Reveal au scroll ────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 60ms; }
.d2 { transition-delay: 120ms; }
.d3 { transition-delay: 180ms; }
.d4 { transition-delay: 240ms; }

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 860px) {
  .site-nav { display: none; }
  .idea-cols, .cards, .daily-grid, .open-card { grid-template-columns: 1fr; }
  .daily-note { transform: none; margin-top: 1rem; }
  .desk { height: 280px; }
}

/* ─── Reduced motion : opacité conservée, déplacement coupé ── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 300ms ease; }
  .ticker-track,
  .notch-wave i,
  .companion,
  .ink-path,
  .ring path,
  .bubble { animation: none; }
  .bubble { opacity: 1; transform: none; }
  .ring path { stroke-dashoffset: 0; }
  .companion { offset-distance: 100%; opacity: 1; }
  .card, .btn { transition: none; }
}