/* Les tokens de l'app, tenus en phase avec src/theme/tokens.ts. */
:root {
  --white:#fff; --muted:#F5F6F8; --cream:#FDF6EC;
  --blue500:#4A90E2; --blue600:#2C74C8; --blue700:#185FA5; --blue800:#1F5697; --blue50:#E6F1FB;
  --charcoal:#2F3542; --gray600:#656B76; --gray400:#9AA0AA;
  --border:#E9EAEE; --amber500:#EF9F27; --teal500:#1D9E75;
  --ui:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --story:'Newsreader',Georgia,serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--ui); color:var(--charcoal); background:var(--white);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
.wrap { width:100%; max-width:1060px; margin:0 auto; padding:0 24px; }

/* ---- barre ---- */
.bar { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); }
.bar-in { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--charcoal);
  font-weight:600; font-size:16px; letter-spacing:-.01em; }
.brand img { border-radius:8px; }
.lang { font-size:14px; font-weight:500; color:var(--gray600); text-decoration:none;
  padding:7px 14px; border:1px solid var(--border); border-radius:999px; }
.lang:hover { color:var(--blue700); border-color:var(--blue500); }

/* ---- hero ---- */
.hero { padding:72px 0 0; overflow:hidden; }
.hero-in { text-align:center; display:flex; flex-direction:column; align-items:center; }

/* Le koala porte la promesse. Son bas de corps est creme et disparaitrait sur
   du blanc : il garde donc la meme parade que dans l'app, une flaque de
   lumiere derriere lui et une ombre de contact floue dessous, plutot que de
   teinter la page entiere. */
.koala-stage { position:relative; width:230px; margin-bottom:26px; }
.koala-stage::before { content:''; position:absolute; inset:-16% -10% 5%;
  background:radial-gradient(circle at 50% 45%, rgba(74,144,226,.15), rgba(74,144,226,0) 68%);
  border-radius:50%; }
.koala-stage::after { content:''; position:absolute; left:50%; bottom:2px;
  transform:translateX(-50%); width:46%; height:16px; border-radius:50%;
  background:rgba(47,53,66,.14); filter:blur(8px); }
.koala-stage .koala { position:relative; width:230px; height:auto;
  animation:float 5.5s ease-in-out infinite; }
.hero .note { margin-top:14px; font-size:14px; color:var(--gray400); }
.badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 11px;
  border-radius:999px; background:var(--blue50); color:var(--blue700);
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--blue600);
  animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
h1 { margin-top:22px; font-size:clamp(34px,5.2vw,54px); font-weight:600;
  letter-spacing:-.03em; line-height:1.07; }
h1 .accent { color:var(--blue600); }
.lede { margin:18px auto 0; max-width:34em; font-size:clamp(16px,1.7vw,19px); color:var(--gray600); }

.sample { margin:34px auto 0; max-width:420px; padding:22px 26px;
  background:var(--cream); border-radius:20px; }
.sample .tag { display:block; margin-bottom:12px; font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--blue700); }
.sample .fr { font-family:var(--story); font-size:23px; line-height:1.35; }
.sample .en { margin-top:8px; font-size:15px; color:var(--gray600); }

/* Un cadre de telephone plutot qu'une capture nue : sans lui, l'image flotte
   sans echelle et on ne comprend pas qu'il s'agit d'une app. */
.phone { position:relative; border-radius:34px; border:1px solid var(--border);
  padding:8px; padding-top:26px; background:var(--white);
  box-shadow:0 22px 50px -20px rgba(47,53,66,.25); overflow:hidden; }
.phone img { border-radius:0 0 26px 26px; }

/* La barre d'etat est redessinee en CSS plutot que capturee : l'originale
   portait l'heure du simulateur et la bulle de developpement Expo, deux
   choses qui n'existent pas dans l'app livree. */
.status { position:absolute; top:0; left:0; right:0; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:26px 26px 0 0; background:var(--white); }
.status b { display:block; width:78px; height:13px; border-radius:99px;
  background:var(--charcoal); }
.phone.small { border-radius:26px; padding:6px; padding-top:20px;
  box-shadow:0 14px 30px -14px rgba(47,53,66,.22); }
.phone.small img { border-radius:0 0 20px 20px; }
.phone.small .status { height:20px; border-radius:20px 20px 0 0; }
.phone.small .status b { width:58px; height:10px; }
/* Trois ecrans en eventail, le central legerement souleve : on lit une
   sequence, pas trois captures posees cote a cote. */
.showcase { display:flex; justify-content:center; align-items:flex-end;
  gap:20px; margin-top:56px; }
.showcase .phone { width:236px; flex:none; }
.showcase .phone.lift { transform:translateY(-26px); z-index:2;
  box-shadow:0 30px 60px -22px rgba(47,53,66,.32); }
.showcase .phone:first-child, .showcase .phone:last-child { opacity:.94; }

/* ---- bandes ---- */
.band { padding:72px 0; }
.band.alt { background:var(--muted); }
h2 { font-size:clamp(26px,3.4vw,36px); font-weight:600; letter-spacing:-.025em;
  line-height:1.15; text-align:center; }
.sub { margin:14px auto 0; max-width:44em; text-align:center; color:var(--gray600);
  font-size:clamp(15px,1.5vw,17px); }
.sub.left { text-align:left; margin-left:0; }
.split h2 { text-align:left; }

.cards { display:grid; gap:18px; margin-top:40px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.card { padding:28px 24px; background:var(--white); border:1px solid var(--border);
  border-radius:18px; }
.band:not(.alt) .card { background:var(--white); }
.card .n { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; background:var(--blue600); color:#fff;
  font-size:15px; font-weight:600; box-shadow:0 3px 0 var(--blue800); }
.card h3 { margin-top:14px; font-size:17px; font-weight:600; }
.card p { margin-top:6px; font-size:14.5px; color:var(--gray600); }

.split { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.points { list-style:none; margin-top:26px; }
.points li { padding:16px 0; border-top:1px solid var(--border); }
.points li strong { display:block; font-size:16px; font-weight:600; }
.points li span { display:block; margin-top:3px; font-size:14.5px; color:var(--gray600); }

.skins { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.skin { display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--white); border:1px solid var(--border); border-radius:18px; }
.skin img { width:100%; max-width:120px; }

.ticks { list-style:none; max-width:640px; margin:32px auto 0; }
.ticks li { position:relative; padding:13px 0 13px 34px; font-size:16px;
  border-top:1px solid var(--border); }
.ticks li::before { content:''; position:absolute; left:4px; top:20px;
  width:8px; height:14px; border:solid var(--teal500); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg); }

.flags { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.flag { display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:var(--white); border:1px solid var(--border); border-radius:16px; }
.flag.ready { border-color:var(--blue500); background:var(--blue50); }
.flag .emoji { font-size:26px; line-height:1; }
.flag .name { font-weight:600; font-size:16px; flex:1; }
.flag .state { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray400); }
.flag.ready .state { color:var(--blue700); }

.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gallery figcaption { margin-top:14px; font-size:14px; color:var(--gray600); }
.gallery figcaption strong { display:block; color:var(--charcoal); font-weight:600;
  font-size:15px; margin-bottom:2px; }

/* ---- fin ---- */
.cta { padding:84px 0; text-align:center; background:var(--muted); }
.cta .koala { margin:0 auto 8px; animation:float 5.5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

footer { padding:34px 0 46px; border-top:1px solid var(--border); }
.foot { display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between; }
.foot p { font-size:13.5px; color:var(--gray400); }
.foot nav { display:flex; flex-wrap:wrap; gap:20px; }
.foot a { font-size:13.5px; color:var(--gray600); text-decoration:none; }
.foot a:hover { color:var(--blue700); text-decoration:underline; }
a:focus-visible { outline:2px solid var(--blue600); outline-offset:3px; border-radius:3px; }

@media (max-width:900px) {
  .split { grid-template-columns:1fr; gap:36px; }
  .showcase { gap:12px; }
  .showcase .phone { width:31%; }
  .showcase .phone.lift { transform:translateY(-14px); }
  .cards.three, .flags { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .hero { padding:44px 0 0; }
  .koala-stage, .koala-stage .koala { width:180px; }
  .showcase { margin-top:38px; gap:8px; }
  .band { padding:52px 0; }
  .cards.three, .flags, .gallery, .skins { grid-template-columns:1fr; }
  .skins { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { .dot, .cta .koala { animation:none; } }