/* ============================================================
   ia.vincentpaterne.fr — design clair façon iCloud, élevé.
   Typo système Apple (SF Pro), chat iMessage, cluster flottant
   organique + parallaxe, entrée chorégraphiée, atmosphère douce.
   ============================================================ */
:root{
  --bg:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --hair:#e3e3e8;
  --surface:#f5f5f7;
  --bubble-bot:#f0f0f4;
  --blue:#007aff;
  --green:#30d158;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ============ Atmosphère : halos pastel dérivants ============ */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
.b1{width:520px;height:520px;left:-120px;top:-140px;background:radial-gradient(circle,#cfe0ff,transparent 70%);animation:drift1 22s ease-in-out infinite;}
.b2{width:460px;height:460px;right:-120px;top:40px;background:radial-gradient(circle,#ffe6c2,transparent 70%);animation:drift2 26s ease-in-out infinite;}
.b3{width:480px;height:480px;left:30%;bottom:-180px;background:radial-gradient(circle,#e6d6ff,transparent 70%);animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,30px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-36px,40px);}}
@keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-30px);}}

.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:52px 20px 28px;}

/* ============ HERO ============ */
.hero{text-align:center;max-width:600px;width:100%;}

.cluster{position:relative;width:340px;height:300px;margin:0 auto 6px;}

/* Tuiles : position(--x,--y) + entrée + flottement léger « à la Apple ».
   Chaque tuile a un délai (--d) et une durée propres → mouvement désynchronisé,
   doux, sans parallaxe (pas de réaction à la souris). */
.tile,.cal-widget{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot));
  opacity:0;
  animation:
    tile-in .7s cubic-bezier(.2,.8,.25,1) forwards var(--d),
    floaty calc(6s + var(--depth) * .04s) ease-in-out infinite calc(var(--d) + .7s);
  will-change:transform;
}
@keyframes tile-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.3);}
  to{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot));}
}
@keyframes floaty{
  0%,100%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot)) translateY(0);}
  50%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot)) translateY(-9px);}
}
.tile{
  width:60px;height:60px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(20,20,40,.16), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.12);
}
.tile svg{width:30px;height:30px;}
.grad-video {background:linear-gradient(155deg,#52a6ff,#0a64e0);}
.grad-chart {background:linear-gradient(155deg,#5be07a,#1aa845);}
.grad-book  {background:linear-gradient(155deg,#ffd95a,#ffae00);}
.grad-pencil{background:linear-gradient(155deg,#ffb866,#ff8a00);}
.grad-ai    {background:linear-gradient(155deg,#3ddc84,#0a9d6a);}
.grad-bolt  {background:linear-gradient(155deg,#b18bff,#6b3fd3);}

.cal-widget{
  width:62px;height:62px;border-radius:17px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 12px 26px rgba(20,20,40,.16), inset 0 1.5px 0 rgba(255,255,255,.8);
}
.cal-widget em{font-style:normal;font-size:.45rem;font-weight:700;letter-spacing:.06em;color:#ff3b30;text-transform:uppercase;margin-bottom:1px;}
.cal-widget b{font-size:1.5rem;font-weight:700;color:var(--ink);}
.cal-widget i{font-style:normal;font-size:.5rem;color:var(--ink-2);font-weight:600;}

/* Avatar (#avatar = orbe ; app.js y bascule thinking/talking) */
.avatar-orb{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:156px;height:156px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 50% 36%,#fff6da,#ffe6a3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 22px 50px rgba(20,20,40,.18), inset 0 2px 8px rgba(255,255,255,.7);
  animation:orb-in .8s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes orb-in{from{opacity:0;transform:translate(-50%,-50%) scale(.6);}to{opacity:1;}}
/* Cercle de découpe : cadre le memoji sur le VISAGE (zoom + recentrage),
   le label/buste sort du champ. Le bob (flottement) est porté par le clip. */
.avatar-clip{
  position:relative;width:130px;height:130px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  animation:bob 5s ease-in-out infinite;
}
.avatar-clip .face{width:130px;height:130px;}
.avatar-clip .memoji{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  transform:scale(1.45);transform-origin:50% 30%; /* zoom sur le visage */
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* halo qui pulse quand Vince réfléchit / parle */
.halo{position:absolute;inset:-6px;border-radius:50%;opacity:0;z-index:0;
  background:radial-gradient(circle,rgba(0,122,255,.0) 55%,rgba(0,122,255,.35) 72%,transparent 78%);transition:opacity .3s ease;}
#avatar.thinking .halo{opacity:1;animation:halo-pulse 1.6s ease-in-out infinite;}
#avatar.talking .halo{opacity:1;animation:halo-pulse .7s ease-in-out infinite;background:radial-gradient(circle,rgba(48,209,88,0) 55%,rgba(48,209,88,.4) 72%,transparent 78%);}
@keyframes halo-pulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.08);opacity:1;}}
#avatar.talking .avatar-clip{animation:bob 5s ease-in-out infinite, nod .4s ease-in-out infinite;}
@keyframes nod{0%,100%{transform:translateY(0);}50%{transform:translateY(2px) scale(1.02);}}

.presence{position:absolute;bottom:9px;right:9px;width:26px;height:26px;border-radius:50%;
  background:var(--green);border:4px solid #fff;box-shadow:0 2px 8px rgba(48,209,88,.5);transition:background .6s ease;z-index:3;}
body.offline .presence{background:#c7c7cc;box-shadow:none;}

/* clignement / sommeil du visage SVG (placeholder) */
.eye-lid{transform-origin:center 96px;}
.blink .eye-lid{animation:blink 4.6s infinite;}
@keyframes blink{0%,93%,100%{transform:scale(1,0);}95%,97%{transform:scale(1,1);}}
.eye-closed{opacity:0;transition:opacity .5s ease;}
body.offline .eye-open{opacity:0;}
body.offline .eye-closed{opacity:1;}
.mouth{transform-origin:115px 152px;transition:transform .3s ease;}
body.offline .mouth{transform:scaleY(.55);}
.pupils{transition:transform .4s ease;}
#avatar.thinking .pupils{transform:translateY(-3px);}
body.offline .memoji{filter:grayscale(.5) brightness(.96);}

/* titre + pilule + tagline (entrée différée) */
h1{font-size:clamp(2.7rem,9vw,4.4rem);font-weight:700;letter-spacing:-.025em;line-height:1.0;margin:24px 0 16px;
  opacity:0;animation:rise .7s cubic-bezier(.2,.8,.25,1) .35s forwards;}
.status-pill{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-size:.92rem;font-weight:600;padding:11px 22px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.2);
  opacity:0;animation:rise .7s cubic-bezier(.2,.8,.25,1) .45s forwards;transition:background .4s ease;}
.status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blip 2s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1;}50%{opacity:.4;}}
body.offline .status-pill{background:#86868b;}
body.offline .status-pill .dot{background:#d0d0d4;box-shadow:none;animation:none;}
.tagline{max-width:430px;margin:18px auto 0;font-size:1.18rem;font-weight:600;color:var(--ink);line-height:1.4;
  opacity:0;animation:rise .7s cubic-bezier(.2,.8,.25,1) .55s forwards;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ============ CHAT ============ */
.chat{width:100%;max-width:560px;margin:42px auto 0;opacity:0;animation:rise .7s ease .7s forwards;}
.quick{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:20px;}
.quick button{font-family:var(--font);font-size:.9rem;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid transparent;border-radius:999px;padding:10px 17px;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;}
.quick button:hover{background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);transform:translateY(-2px);}
.quick button:active{transform:scale(.97);}
body.offline .quick{display:none;}

.messages{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:4px 2px;margin-bottom:14px;
  scrollbar-width:thin;scrollbar-color:#d2d2d7 transparent;}
.messages:empty{display:none;}
.messages::-webkit-scrollbar{width:7px;}
.messages::-webkit-scrollbar-thumb{background:#d2d2d7;border-radius:99px;}

.msg{max-width:80%;padding:11px 16px;font-size:.96rem;line-height:1.45;border-radius:20px;word-wrap:break-word;
  animation:pop .34s cubic-bezier(.2,.9,.3,1.25) both;}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.msg .who{display:block;font-size:.66rem;font-weight:700;letter-spacing:.02em;opacity:.6;margin-bottom:3px;}
.msg.bot{align-self:flex-start;background:var(--bubble-bot);color:var(--ink);border-bottom-left-radius:7px;}
.msg.bot .who{color:#8e8e93;}
.msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:7px;}
.msg.vince{align-self:flex-start;background:var(--green);color:#fff;border-bottom-left-radius:7px;box-shadow:0 6px 18px rgba(48,209,88,.32);}
.msg.vince .who{color:rgba(255,255,255,.88);}
.system-line{align-self:center;text-align:center;font-size:.8rem;font-weight:600;color:var(--ink-2);padding:3px 12px;}
.system-line em{color:var(--ink);font-style:normal;font-weight:700;}

.typing{align-self:flex-start;display:flex;gap:5px;background:var(--bubble-bot);border-radius:20px;border-bottom-left-radius:7px;padding:14px 18px;}
.typing i{width:7px;height:7px;border-radius:50%;background:#b0b0b5;display:block;animation:tdot 1.1s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.15s;}.typing i:nth-child(3){animation-delay:.3s;}
@keyframes tdot{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-5px);opacity:1;}}

.input-bar{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--hair);border-radius:999px;
  padding:6px 6px 6px 20px;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:border-color .2s,box-shadow .2s;}
.input-bar:focus-within{border-color:transparent;box-shadow:0 0 0 4px rgba(0,122,255,.18),0 8px 24px rgba(0,0,0,.08);}
.input-bar input{flex:1;border:none;outline:none;background:none;font-family:var(--font);font-size:1rem;color:var(--ink);}
.input-bar input::placeholder{color:#a1a1a8;}
.send-btn{flex-shrink:0;width:42px;height:42px;border:none;border-radius:50%;background:var(--blue);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s,background .2s,opacity .2s;}
.send-btn svg{width:20px;height:20px;}
.send-btn:hover{background:#0a6fe0;}
.send-btn:active{transform:scale(.88);}
body.offline .input-bar{display:none;}

/* Hors ligne */
.offline-panel{display:none;flex-direction:column;gap:12px;max-width:440px;margin:0 auto;}
body.offline .offline-panel{display:flex;animation:pop .4s ease both;}
.offline-panel p{color:var(--ink-2);font-size:.96rem;line-height:1.55;text-align:center;margin-bottom:4px;}
.offline-panel input,.offline-panel textarea{background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  padding:13px 16px;font-family:var(--font);font-size:.96rem;color:var(--ink);outline:none;resize:vertical;transition:border-color .2s;}
.offline-panel input:focus,.offline-panel textarea:focus{border-color:#b9b9c0;}
.offline-panel button{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:14px;font-family:var(--font);
  font-weight:600;font-size:.98rem;cursor:pointer;transition:opacity .2s,transform .15s;}
.offline-panel button:hover{opacity:.88;}.offline-panel button:active{transform:scale(.98);}

footer{margin-top:auto;padding-top:44px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:center;
  font-size:.85rem;color:var(--ink-2);opacity:0;animation:rise .7s ease .85s forwards;}
footer a{color:var(--ink-2);text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--ink);}

/* ============ Pages SEO ============ */
.doc{width:100%;max-width:720px;margin:20px auto;text-align:left;position:relative;z-index:1;}
.doc a.back{display:inline-block;margin-bottom:20px;color:var(--blue);text-decoration:none;font-weight:600;font-size:.95rem;}
.doc a.back:hover{text-decoration:underline;}
.doc h1{font-size:clamp(2rem,6vw,3rem);margin:0 0 8px;letter-spacing:-.02em;opacity:1;animation:none;}
.doc .lead{font-size:1.2rem;color:var(--ink-2);margin-bottom:28px;font-weight:500;}
.doc h2{font-size:1.4rem;font-weight:700;margin:30px 0 10px;letter-spacing:-.01em;}
.doc p{color:var(--ink);line-height:1.6;margin-bottom:14px;}
.doc ul{list-style:none;margin:0 0 16px;padding:0;}
.doc li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--ink);line-height:1.55;}
.doc li::before{content:"";position:absolute;left:4px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.doc strong{font-weight:600;}
.doc .cta{display:inline-block;margin-top:18px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:999px;transition:opacity .2s;}
.doc .cta:hover{opacity:.88;}

@media(max-width:480px){
  .page{padding:34px 16px 24px;}
  .cluster{width:300px;height:284px;transform:scale(.92);}
  .tagline{font-size:1.05rem;}
}
@media (prefers-reduced-motion: reduce){
  .blob,.tile,.cal-widget,.face,.memoji,.blink .eye-lid,.halo,h1,.status-pill,.tagline,.chat,footer{animation:none !important;opacity:1 !important;}
  .tile,.cal-widget{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot));}
}