/* Feuille de la page Personable (personable.html), chargee apres
   site.css et par cette seule page : l'accueil n'en paie pas le poids.

   Deux mondes, comme dans l'app ("Personable is the frame, the apps
   are the pictures") :
   - le cadre de la page reste dans la palette du site (teal, creme, or,
     orange, rouge, et les gris du site) ;
   - DANS les telephones, chaque mini app porte sa propre palette, celle
     que l'app lui donne vraiment (src/runner/theme.ts de Personable :
     Forge, Lilac, Lemon, Garden, Sky, Midnight). C'est la seule exception
     a la regle de palette du site, et elle reste a l'interieur des ecrans.

   Regle de mouvement : l'etat par defaut de chaque element est son etat
   FINAL. Le cache et le mouvement ne s'appliquent que sous
   html.js et prefers-reduced-motion: no-preference. Sans JS, ou sans
   mouvement, tout s'affiche fini et lisible. */

/* Les couleurs d'une app sont enregistrees comme couleurs, pour que le
   changement de theme de la section "Change it" puisse se transitionner. */
@property --g  { syntax:'<color>'; inherits:true; initial-value:#ffffff; }
@property --s  { syntax:'<color>'; inherits:true; initial-value:#ffffff; }
@property --i  { syntax:'<color>'; inherits:true; initial-value:#111111; }
@property --a  { syntax:'<color>'; inherits:true; initial-value:#111111; }
@property --on { syntax:'<color>'; inherits:true; initial-value:#ffffff; }
@property --wp { syntax:'<percentage>'; inherits:true; initial-value:0%; }
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* ---------- Ossature ---------- */

.pp{ flex:1; }

/* Les sections de demonstration debordent la colonne de 720px du site :
   une page produit a besoin de place pour un telephone et une
   conversation cote a cote. Le texte, lui, reste dans la colonne. */
.wide{
  width:100%;
  max-width:1100px;
  margin-inline:auto;
}

.pp-sec{ margin-top:clamp(96px, 16vh, 160px); }

.pp-head{
  text-align:center;
  max-width:640px;
  margin-inline:auto;
}
.pp-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px, 5.6vw, 44px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:16px 0 0;
  text-wrap:balance;
}
.pp-head p{
  color:var(--muted);
  font-size:clamp(15px, 3.6vw, 17px);
  line-height:1.62;
  margin:18px auto 0;
  max-width:52ch;
  text-wrap:pretty;
}

/* ---------- Hero ---------- */

.pp-hero{
  position:relative;
  text-align:center;
  padding-top:clamp(48px, 10vh, 104px);
}

/* Aurore tres douce derriere le hero, dans les couleurs du logo */
.pp-aurora{
  position:absolute;
  left:50%;
  top:-120px;
  width:min(1100px, 100vw);
  height:760px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:-1;
  filter:blur(60px);
  opacity:.55;
}
.pp-aurora i{
  position:absolute;
  border-radius:50%;
}
.pp-aurora i:nth-child(1){ left:8%;  top:18%; width:46%; height:42%; background:rgba(106,182,178,.30); }
.pp-aurora i:nth-child(2){ right:6%; top:8%;  width:40%; height:40%; background:rgba(214,120,62,.22); }
.pp-aurora i:nth-child(3){ left:34%; top:44%; width:36%; height:34%; background:rgba(229,178,70,.16); }

/* Trame de points, effacee vers les bords */
.pp-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:-40px;
  width:min(1200px, 100vw);
  height:620px;
  transform:translateX(-50%);
  background-image:radial-gradient(rgba(236,236,238,.10) 1px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side, #000 20%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 20%, transparent 100%);
  pointer-events:none;
  z-index:-1;
}

/* L'icone de l'app, au-dessus du titre. Ses cinq tuiles sont
   dessinees dans l'ordre du P (voir le mouvement plus bas). */
.pp-icon{
  position:relative;
  width:52px;
  margin:0 auto 22px;
}
.pp-icon svg{
  display:block;
  width:52px;
  height:52px;
  border-radius:12px;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.9);
}
/* Halo discret dans les couleurs du logo */
.pp-icon::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 200deg, var(--teal), var(--cream), var(--gold), var(--orange), var(--red), var(--teal));
  filter:blur(18px);
  opacity:.2;
  z-index:-1;
}

.pp-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 8px;
  border:1px solid #26262D;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.pp-pill b{
  font-weight:500;
  color:var(--ink);
  background:var(--cream);
  border-radius:999px;
  padding:3px 9px;
  letter-spacing:.1em;
}

.pp-hero .headline{
  font-size:clamp(40px, 9vw, 76px);
  letter-spacing:-.045em;
  line-height:1.0;
  margin-top:22px;
}
/* Le mot "wish" en degrade, une seule touche de couleur dans le titre */
.pp-hero .headline em{
  font-style:normal;
  background:linear-gradient(92deg, var(--teal), var(--cream) 45%, var(--gold) 70%, var(--orange));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.pp-hero .standfirst{ max-width:48ch; margin-top:24px; }

.pp-tags{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.pp-tags li{ display:flex; align-items:center; gap:8px; }
.pp-tags li::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c);
}
.pp-tags li:nth-child(1){ --c:var(--teal); }
.pp-tags li:nth-child(2){ --c:var(--gold); }
.pp-tags li:nth-child(3){ --c:var(--red); }

/* ==========================================================
   La scene : une phrase devient une app.
   A gauche la conversation, a droite le telephone.
   ========================================================== */

.stage-wrap{ margin-top:clamp(56px, 9vh, 88px); }

.stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
  padding:clamp(16px, 3vw, 36px);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid #1D1D23;
  isolation:isolate;
}

/* L'anneau : visible pendant que Personable "reflechit" et fabrique */
.stage::before,
.stage::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ang), var(--teal), var(--cream), var(--gold), var(--orange), var(--red), var(--teal));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
  z-index:-1;
}
.stage::after{
  inset:-2px;
  padding:2px;
  filter:blur(18px);
}
.stage.busy::before{ opacity:.9; }
.stage.busy::after{ opacity:.45; }

/* ---------- La conversation ---------- */

.chat{
  display:flex;
  flex-direction:column;
  height:642px;
  border-radius:22px;
  background:#0C0C0F;
  border:1px solid #1A1A20;
  overflow:hidden;
}
.chat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #18181D;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.chat-top b{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.02em;
  text-transform:none;
  color:var(--text);
}
.chat-top b{ display:inline-flex; align-items:center; gap:8px; }
.chat-top b img{ display:block; border-radius:5px; }
.chat-top .lights{ display:flex; gap:6px; }
.chat-top .lights i{ width:9px; height:9px; border-radius:50%; background:#24242B; }

.thread{
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
  padding:20px 22px 4px;
}
.take{ display:none; }
.take.on{ display:block; }

.bubble{
  margin:0 0 0 auto;
  width:fit-content;
  max-width:86%;
  padding:11px 15px;
  border-radius:20px 20px 6px 20px;
  background:#1C1C21;
  color:var(--text);
  font-size:15px;
  line-height:1.45;
}

.think{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  font-size:14px;
}
.think .dots{ display:flex; gap:4px; }
.think .dots i{ width:6px; height:6px; border-radius:50%; background:var(--cream); }
/* Texte qui scintille, le "Personable reflechit" */
.shimmer{
  background:linear-gradient(90deg, var(--faint) 0%, var(--faint) 35%, var(--text) 50%, var(--faint) 65%, var(--faint) 100%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
/* Une fois le plan arrive, la ligne de reflexion s'efface */
.think.gone{ display:none; }

.say{
  margin:20px 0 0;
  color:var(--text);
  font-size:15px;
}

.plan{
  margin-top:12px;
  padding:18px;
  border-radius:20px;
  background:#141418;
  border:1px solid #1E1E24;
}
.plan-app{ display:flex; align-items:center; gap:12px; }
.plan-ico{
  width:44px;
  height:44px;
  flex:none;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  background:var(--tile);
}
.plan-name{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.025em;
  line-height:1.15;
}
.plan-name small{
  display:block;
  font-family:var(--body);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:0;
  color:var(--muted);
}
.plan ul{ list-style:none; margin:14px 0 0; padding:0; }
.plan li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:8px 0;
  border-top:1px solid #1E1E24;
  font-size:14px;
  line-height:1.4;
  color:var(--text);
}
.plan li svg{
  flex:none;
  width:16px;
  height:16px;
  margin-top:1px;
  color:var(--teal);
}
.plan li.idea svg{ color:var(--gold); }
.plan li small{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2px;
}
.make{
  margin-top:14px;
  display:block;
  width:100%;
  padding:12px;
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  text-align:center;
}

/* La ligne de fabrication : les cinq bandes servent de progression */
.made{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--muted);
}
.made .bars{ display:flex; gap:4px; width:96px; flex:none; }
.made .bars i{
  flex:1;
  height:3px;
  border-radius:2px;
  background:var(--c);
  transform-origin:left center;
}
.made .bars i:nth-child(1){ --c:var(--teal); }
.made .bars i:nth-child(2){ --c:var(--cream); }
.made .bars i:nth-child(3){ --c:var(--gold); }
.made .bars i:nth-child(4){ --c:var(--orange); }
.made .bars i:nth-child(5){ --c:var(--red); }
.made .ok{ color:var(--text); }
.made .ok::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:var(--teal);
  vertical-align:1px;
}
.made .doing{ display:none; }

.composer{
  margin:14px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:12px 12px 12px 16px;
  min-height:64px;
  border-radius:18px;
  background:#16161A;
  border:1px solid #202027;
  font-size:15px;
  line-height:1.45;
}
.composer .field{ flex:1; align-self:flex-start; color:var(--text); }
.composer .field .ph-text{ color:var(--faint); }
.caret{
  display:inline-block;
  width:2px;
  height:1.1em;
  margin-left:1px;
  background:var(--cream);
  vertical-align:-3px;
}
.send{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--cream);
  color:var(--ink);
}
.send svg{ width:16px; height:16px; }

/* ---------- Le telephone ----------
   Tout est en em : on change la taille d'un telephone en changeant
   sa font-size, rien d'autre. */

.device{ display:flex; justify-content:center; }

.ph{
  --g:#F3F6FA; --s:#FFFFFF; --i:#16202C; --a:#2F80ED; --on:#FFFFFF; --wp:10%;
  --hf:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --bf:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --rc:1.35em; --rb:999px;
  --sh:0 .08em .25em rgba(20,20,30,.05), 0 .7em 1.8em -.8em rgba(20,20,30,.16);

  position:relative;
  flex:none;
  font-size:13px;
  width:23em;
  height:49.4em;
  border-radius:3.6em;
  background:var(--g);
  color:var(--i);
  font-family:var(--bf);
  line-height:1.38;
  letter-spacing:-.01em;
  text-align:left;
  overflow:hidden;
  box-shadow:
    0 0 0 .5em #1A1A1F,
    0 0 0 .58em #34343C,
    0 2.6em 5em -1.6em rgba(0,0,0,.75);
  -webkit-font-smoothing:antialiased;
}
/* L'ilot, au-dessus de tout */
.ph::after{
  content:"";
  position:absolute;
  top:.8em;
  left:50%;
  width:7.2em;
  height:2.1em;
  margin-left:-3.6em;
  border-radius:1.1em;
  background:#000;
  z-index:6;
}

.scr{
  position:absolute;
  inset:0;
  padding:3.9em 1.35em 6.4em;
  background:var(--g);
  background:linear-gradient(180deg, color-mix(in srgb, var(--a) var(--wp), var(--g)) 0, var(--g) 21em);
  color:var(--i);
  overflow:hidden;
}

.ph-bar{
  position:absolute;
  top:1.15em;
  left:2.3em;
  right:1.9em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  font-size:1.05em;
  letter-spacing:0;
  z-index:5;
}
.ph-bar svg{ width:5.2em; height:.95em; }

/* Les palettes des apps, telles que l'app les dessine */
.app-forge{    --g:#0F1013; --s:#1B1D22; --i:#F5F3EF; --a:#FF6A2B; --on:#0F1013; --wp:26%; --sh:none; }
.app-lilac{    --g:#F4F1FA; --s:#FFFFFF; --i:#241F33; --a:#7A5BC7; --on:#FFFFFF; --wp:16%; }
.app-lemon{    --g:#FFF8DC; --s:#FFFFFF; --i:#27241A; --a:#F4B400; --on:#27241A; --wp:16%; }
.app-garden{   --g:#EEF3EA; --s:#FFFFFF; --i:#1D2B21; --a:#2F6F45; --on:#FFFFFF; --wp:16%; }
.app-sky{      --g:#F3F6FA; --s:#FFFFFF; --i:#16202C; --a:#2F80ED; --on:#FFFFFF; --wp:10%; }
.app-midnight{ --g:#0D1B2E; --s:#16273F; --i:#E8EFF8; --a:#5BD6C8; --on:#0D1B2E; --wp:22%; --sh:none; }

/* Les familles de caracteres, celles de l'iPhone */
.f-futura{ --hf:Futura, "Futura PT", "Century Gothic", "Trebuchet MS", sans-serif; }
.f-serif{  --hf:ui-serif, "New York", "Iowan Old Style", Georgia, serif; }
.f-round{  --hf:ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, sans-serif; }
.c-soft{ --rc:1.1em; --rb:1.05em; }

/* ---------- Les pieces d'une app ---------- */

.a-name{ font-size:.84em; font-weight:500; opacity:.6; }

.a-week{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  text-align:center;
  margin-top:.5em;
  font-size:.92em;
}
.a-week span{ display:block; font-size:.78em; opacity:.6; }
.a-week b{
  display:block;
  width:2em;
  height:2em;
  line-height:2em;
  margin:.2em auto 0;
  border-radius:.62em;
  font-weight:500;
}
.a-week .t b{ background:var(--i); color:var(--g); font-weight:600; }
.a-week i{
  display:block;
  width:.32em;
  height:.32em;
  margin:.32em auto 0;
  border-radius:50%;
  background:var(--a);
}
.a-week .n i{ background:transparent; }

.a-hi{
  font-family:var(--hf);
  font-weight:700;
  font-size:1.62em;
  line-height:1.14;
  letter-spacing:-.025em;
  margin-top:.85em;
}
.a-sub{ opacity:.62; margin-top:.1em; }

.a-sec{
  font-family:var(--hf);
  font-weight:700;
  font-size:1.2em;
  letter-spacing:-.02em;
  margin-top:1.15em;
}

.a-card{
  margin-top:.85em;
  padding:1.05em 1.1em;
  border-radius:var(--rc);
  background:var(--s);
  box-shadow:var(--sh);
}
.a-label{ font-size:.84em; opacity:.62; }

.a-btn{
  display:block;
  margin-top:.85em;
  padding:.92em;
  border-radius:var(--rb);
  background:var(--a);
  color:var(--on);
  font-weight:600;
  text-align:center;
}
.a-ghost{
  display:block;
  margin-top:.7em;
  padding:.7em;
  border-radius:var(--rb);
  background:color-mix(in srgb, var(--i) 7%, transparent);
  font-weight:600;
  font-size:.92em;
  text-align:center;
}

.a-big{
  font-family:var(--hf);
  font-weight:700;
  font-size:2.6em;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.a-big small{
  font-family:var(--bf);
  font-size:.36em;
  font-weight:400;
  letter-spacing:-.01em;
  opacity:.65;
  margin-left:.2em;
}

.a-row{
  display:flex;
  align-items:center;
  gap:.7em;
  padding:.72em 0;
  border-top:1px solid color-mix(in srgb, var(--i) 9%, transparent);
}
.a-row:first-child{ border-top:0; padding-top:.1em; }
.a-row .x{ margin-left:auto; font-size:.86em; opacity:.6; white-space:nowrap; }

.a-bar{
  margin-top:.7em;
  height:.42em;
  border-radius:1em;
  background:color-mix(in srgb, var(--i) 9%, transparent);
  overflow:hidden;
}
.a-bar i{
  display:block;
  height:100%;
  width:var(--v, 50%);
  border-radius:1em;
  background:var(--a);
}

.a-chips{ display:flex; flex-wrap:wrap; gap:.42em; margin-top:.6em; }
.a-chip{
  padding:.38em .75em;
  border-radius:999px;
  font-size:.88em;
  background:color-mix(in srgb, var(--i) 6%, transparent);
}
.a-chip.on{
  background:color-mix(in srgb, var(--a) 18%, var(--s));
  color:color-mix(in srgb, var(--a) 70%, var(--i));
  font-weight:600;
}

/* La barre d'onglets flottante */
.a-tabs{
  position:absolute;
  left:1.35em;
  right:1.35em;
  bottom:1.45em;
  display:flex;
  justify-content:space-around;
  padding:.55em .3em .5em;
  border-radius:2.3em;
  background:var(--s);
  box-shadow:0 .6em 1.8em -.6em rgba(0,0,0,.28);
  font-size:.76em;
  font-weight:500;
  z-index:4;
}
.a-tabs span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1em;
  min-width:4.6em;
  opacity:.5;
}
.a-tabs span.on{ opacity:1; color:var(--a); font-weight:600; }
.a-tabs svg{ width:2em; height:2em; }

svg.ic{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* -- Iron Log : le carnet de seances -- */
.sets{ width:100%; border-collapse:collapse; margin-top:.5em; font-size:.92em; }
.sets th{
  font-size:.74em;
  font-weight:600;
  letter-spacing:.06em;
  text-align:left;
  opacity:.55;
  padding:0 .2em .4em;
}
.sets td{
  padding:.42em .2em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sets td.p{ opacity:.5; font-weight:500; }
.sets td:last-child{ text-align:right; width:2em; }
.sets tr.done td{ background:color-mix(in srgb, var(--a) 18%, transparent); }
.sets tr.done td:first-child{ border-radius:.6em 0 0 .6em; padding-left:.5em; }
.sets tr.done td:last-child{ border-radius:0 .6em .6em 0; padding-right:.4em; }
.sets td:first-child{ padding-left:.5em; }
.tick{
  display:inline-grid;
  place-items:center;
  width:1.55em;
  height:1.55em;
  border-radius:.45em;
  background:color-mix(in srgb, var(--i) 12%, transparent);
  color:transparent;
}
.tick svg{ width:1em; height:1em; }
.done .tick,
.tick.on{ background:var(--a); color:var(--on); }
.ex{ font-family:var(--hf); font-weight:700; color:var(--a); font-size:1.12em; }
.kv{ display:flex; justify-content:space-between; padding:.38em 0; }
.kv b{ font-variant-numeric:tabular-nums; }

/* -- Moodline : le journal d'humeur -- */
.faces{ display:flex; justify-content:space-between; margin-top:.55em; }
.face{
  width:2.6em;
  height:2.6em;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:color-mix(in srgb, var(--i) 55%, transparent);
}
.face svg{ width:2.2em; height:2.2em; }
.face.on{ background:var(--a); color:var(--on); }
.heat{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:.3em;
  margin-top:.55em;
}
.heat i{
  height:1.3em;
  border-radius:.4em;
  background:color-mix(in srgb, var(--a) calc(var(--l, 0) * 1%), color-mix(in srgb, var(--i) 6%, var(--s)));
}
.heat .l1{ --l:22; } .heat .l2{ --l:44; } .heat .l3{ --l:70; } .heat .l4{ --l:100; }
.ai-line{ margin-top:.35em; font-family:var(--hf); font-size:1.08em; line-height:1.4; }
.ai-tag{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font-size:.8em;
  font-weight:600;
  color:var(--a);
}
.ai-tag svg{ width:1.1em; height:1.1em; }

/* -- Habits : les habitudes du jour -- */
.hab .a-row{ padding:.78em 0; }
.chk{
  flex:none;
  width:1.75em;
  height:1.75em;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:.13em solid color-mix(in srgb, var(--i) 22%, transparent);
  color:transparent;
}
.chk svg{ width:1.05em; height:1.05em; }
.chk.on{ background:var(--a); border-color:var(--a); color:var(--on); }
.flame{ color:#E8590C; }

/* ==========================================================
   L'IA dans les apps : trois cartes, trois vignettes.
   ========================================================== */

.ai-grid{
  margin-top:clamp(40px, 7vh, 64px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
.ai-card{
  border-radius:24px;
  background:#0E0E11;
  border:1px solid #1C1C22;
  overflow:hidden;
}
.ai-card h3{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-.02em;
  margin:0;
}
.ai-card p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:8px 0 0; }
.ai-body{ padding:22px 22px 26px; }

/* La vignette : un petit morceau d'app, dans sa palette */
.vig{
  position:relative;
  height:250px;
  padding:20px;
  font-size:13px;
  font-family:var(--bf);
  color:var(--i);
  background:var(--g);
  background:linear-gradient(180deg, color-mix(in srgb, var(--a) var(--wp), var(--g)), var(--g));
  overflow:hidden;
  line-height:1.38;
  letter-spacing:-.01em;
  /* les jetons d'une app, sans le telephone autour */
  --hf:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --bf:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --rc:1.1em; --rb:1.05em;
  --sh:0 .08em .25em rgba(20,20,30,.05), 0 .7em 1.8em -.8em rgba(20,20,30,.16);
}
.vig .a-card{ margin-top:0; }

/* 1. Lire une photo */
.snap{ display:flex; gap:14px; align-items:stretch; }
.photo{
  position:relative;
  flex:none;
  width:96px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:44px;
  background:linear-gradient(160deg, #DCE8D3, #B9CFAE);
}
.scan{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:34%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.75));
  border-bottom:2px solid #fff;
  opacity:0;
}
.fields{ flex:1; }
.fld{
  padding:7px 0;
  border-top:1px solid color-mix(in srgb, var(--i) 9%, transparent);
  font-size:.92em;
}
.fld:first-child{ border-top:0; padding-top:0; }
.fld span{ display:block; font-size:.8em; opacity:.55; }
.fld b{ font-weight:600; }

/* 2. Chercher sur le web */
.q{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:12px;
  background:var(--s);
  box-shadow:var(--sh);
  font-weight:500;
}
.q svg{ width:16px; height:16px; color:var(--a); flex:none; }
.hits{ margin-top:10px; }
.hit{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 2px;
  border-top:1px solid color-mix(in srgb, var(--i) 10%, transparent);
  font-size:.92em;
}
.hit:first-child{ border-top:0; }
.hit .x{ margin-left:auto; font-size:.8em; opacity:.55; white-space:nowrap; }
.hit .plus{
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--a);
  color:var(--on);
}
.hit .plus svg{ width:12px; height:12px; }

/* 3. Ecrire dans la voix de l'app */
.stream{ margin-top:8px; font-family:var(--hf); font-size:1.12em; line-height:1.45; }

/* ==========================================================
   Changer en demandant : un telephone et son panneau.
   ========================================================== */

.change{
  max-width:940px;
  margin-inline:auto;
  margin-top:clamp(40px, 7vh, 64px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:clamp(32px, 6vw, 80px);
  align-items:center;
}
.change-text h3{
  max-width:22ch;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(22px, 3.4vw, 28px);
  letter-spacing:-.03em;
  line-height:1.2;
  margin:0;
}
.change-text p{ color:var(--muted); line-height:1.65; margin:14px 0 0; max-width:44ch; }
.asks{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.asks li{
  padding:7px 13px;
  border:1px solid #2A2A31;
  border-radius:999px;
  font-size:14px;
  color:var(--text);
}
.change-text .undo-note{
  max-width:none;
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.undo-note i{ width:22px; height:3px; border-radius:2px; background:var(--teal); }

/* Le telephone qui change de theme : ses couleurs glissent */
.ph-morph{
  transition:--g .9s ease, --s .9s ease, --i .9s ease, --a .9s ease, --on .9s ease, --wp .9s ease;
}
.ph-morph.to-garden{ --g:#EEF3EA; --s:#FFFFFF; --i:#1D2B21; --a:#2F6F45; --on:#FFFFFF; --wp:16%; }
.ph-morph.to-garden .a-hi,
.ph-morph.to-garden .a-sec{ font-family:ui-serif, "New York", "Iowan Old Style", Georgia, serif; }

/* La carte ajoutee par la demande ; masquee tant qu'elle n'est pas demandee */
.added{ display:none; }
.ph-morph.with-water .added{ display:block; }

/* Le panneau "Change something" */
.sheet{
  position:absolute;
  left:.6em;
  right:.6em;
  bottom:.6em;
  padding:.7em 1.1em 1.2em;
  border-radius:2.4em 2.4em 2.9em 2.9em;
  background:#141418;
  color:#ECECEE;
  box-shadow:0 -1em 3em -1em rgba(0,0,0,.45);
  z-index:7;
  font-family:var(--body);
  transform:translateY(115%);
}
.sheet .grab{ width:3em; height:.32em; border-radius:1em; background:#3A3A42; margin:0 auto .9em; }
.sheet .seg{
  display:flex;
  gap:.3em;
  padding:.25em;
  border-radius:999px;
  background:#1C1C21;
  font-size:.86em;
  font-weight:600;
}
.sheet .seg span{ flex:1; text-align:center; padding:.42em; border-radius:999px; color:#8B8B95; }
.sheet .seg span.on{ background:#2A2A31; color:#ECECEE; }
.sheet .box{
  display:flex;
  align-items:flex-end;
  gap:.6em;
  margin-top:.8em;
  padding:.8em .7em .7em 1em;
  min-height:4.4em;
  border-radius:1.2em;
  background:#1C1C21;
  font-size:.98em;
}
.sheet .box .field{ flex:1; align-self:flex-start; }
.sheet .box .ph-text{ color:#6E6E78; }
.sheet .send{ width:2.3em; height:2.3em; }
.sheet .busy-line{ display:none; margin-top:.8em; font-size:.92em; }

/* Le flash sur ce qui vient de changer */
.flash{ position:relative; }
.flash::after{
  content:"";
  position:absolute;
  inset:-.3em;
  border-radius:calc(var(--rc) + .3em);
  border:.16em solid var(--a);
  opacity:0;
  pointer-events:none;
}

/* ==========================================================
   Les trois etapes et les points
   ========================================================== */

.steps3{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  counter-reset:s;
}
.steps3 li{
  padding:18px 4px 0;
  border-top:1px solid var(--line-soft);
  color:var(--muted);
  font-size:14.5px;
  line-height:1.55;
}
.steps3 b{
  display:block;
  font-family:var(--display);
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:4px;
}
.steps3 b::before{
  counter-increment:s;
  content:"0" counter(s);
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--c);
  margin-right:12px;
  vertical-align:2px;
}
.steps3 li:nth-child(1){ --c:var(--teal); }
.steps3 li:nth-child(2){ --c:var(--gold); }
.steps3 li:nth-child(3){ --c:var(--red); }

/* Choisir l'app de la scene, et la mettre en pause */
.stage-ctl{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.pick{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 10px;
  border:1px solid #23232A;
  border-radius:999px;
  background:none;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.pick:hover{ color:var(--text); border-color:#34343C; }
.pick[aria-pressed="true"]{ color:var(--text); border-color:#3A3A42; background:rgba(255,255,255,.04); }
.pick .em{ font-size:16px; line-height:1; }
/* Sous la pastille de l'app en cours, sa progression */
.pick .prog{
  position:absolute;
  left:14px;
  right:14px;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--cream);
  transform-origin:left center;
  transform:scaleX(0);
}
.toggle{
  margin-left:6px;
  padding:8px 10px;
  border:0;
  background:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.toggle:hover{ color:var(--text); }
.toggle[hidden]{ display:none; }

.pp-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:clamp(40px, 7vh, 56px);
}
.pp-facts div{
  padding:24px;
  border-radius:20px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
}
.pp-facts h3{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.02em;
  margin:0;
}
.pp-facts h3::before{
  content:"";
  display:block;
  width:24px;
  height:3px;
  border-radius:2px;
  background:var(--c);
  margin-bottom:18px;
}
.pp-facts div:nth-child(1){ --c:var(--teal); }
.pp-facts div:nth-child(2){ --c:var(--gold); }
.pp-facts div:nth-child(3){ --c:var(--red); }
.pp-facts p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:10px 0 0; }

/* La fin de page */
.pp-end{
  text-align:center;
  margin-top:clamp(104px, 18vh, 176px);
  padding-bottom:clamp(56px, 10vh, 96px);
}
.pp-end-icon{
  display:block;
  width:48px;
  height:48px;
  margin:0 auto 24px;
  border-radius:11px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
}
.pp-end h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px, 7vw, 60px);
  letter-spacing:-.045em;
  line-height:1.02;
  margin:0;
}
.pp-end .bands{ margin-top:30px; }
.pp-end p{ color:var(--muted); margin:26px auto 0; max-width:44ch; }

/* ---------- Tailles intermediaires et mobile ---------- */

@media (max-width: 920px){
  .ai-grid{ grid-template-columns:minmax(0, 1fr); max-width:520px; margin-inline:auto; }
  .pp-facts{ grid-template-columns:minmax(0, 1fr); max-width:520px; margin-inline:auto; gap:14px; }
}

@media (max-width: 860px){
  /* Sans JS seulement : la scene s'empile. Avec JS, elle garde sa mise
     en page cote a cote et le script la reduit a la largeur de l'ecran
     (voir .stage.fit). */
  html:not(.js) .stage{
    grid-template-columns:minmax(0, 1fr);
    padding:14px;
    border-radius:26px;
  }
  html:not(.js) .chat{ height:auto; }
  html:not(.js) .thread{ min-height:580px; padding:18px 16px 4px; }
  html:not(.js) .device{ padding-bottom:10px; }
  /* Le telephone de "Change it" reste discret sous son texte */
  .change .ph{ font-size:10.5px; }
  .change{ grid-template-columns:minmax(0, 1fr); text-align:center; }
  .change-text p{ margin-inline:auto; }
  .asks{ justify-content:center; }
  .undo-note{ justify-content:center; }
  .change .device{ order:2; }
}

@media (max-width: 640px){
  .steps3{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .steps3 li{ padding:14px 0; }
}

@media (max-width: 380px){
  html:not(.js) .stage .ph{ font-size:11.6px; }
  .change .ph{ font-size:10px; }
  html:not(.js) .bubble,
  html:not(.js) .say,
  html:not(.js) .composer{ font-size:14px; }
  html:not(.js) .plan{ padding:14px; }
  html:not(.js) .thread{ min-height:600px; }
  html:not(.js) .plan-name small{ display:none; }
}

/* ==========================================================
   Le mouvement. Uniquement avec JS et sans reduction de mouvement.
   Les classes d'etat (.run, .shown, .busy...) sont posees par le
   script en bas de personable.html.
   ========================================================== */

@media (prefers-reduced-motion: no-preference){

  /* L'icone se pose, puis ses cinq carres surgissent un a un, dans
     l'ordre du P. Le script rejoue le geste au survol (.pop). */
  .pp-icon svg{ animation:icon-in .7s cubic-bezier(.2,.7,.3,1) .05s both; }
  html.js .pp-icon .tl{
    transform-box:fill-box;
    transform-origin:center;
    opacity:0;
  }
  html.js .pp-icon.pop .tl{
    animation:tile .55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:calc(.35s + var(--k) * .13s);
  }

  html.js .pp-aurora i{ animation:drift 18s ease-in-out infinite alternate; }
  html.js .pp-aurora i:nth-child(2){ animation-duration:22s; animation-direction:alternate-reverse; }
  html.js .pp-aurora i:nth-child(3){ animation-duration:26s; }

  .stage.busy::before,
  .stage.busy::after{ animation:spin 3.2s linear infinite; }

  /* Apparition des sections au defilement */
  html.js .rv{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
  }
  html.js .rv.in{ opacity:1; transform:none; }

  /* La scene : ce qui n'est pas encore arrive est cache */
  .stage.run .sq{
    opacity:0;
    transform:translateY(8px);
    transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .stage.run .sq.shown{ opacity:1; transform:none; }

  .stage.run .think .dots i{ animation:breath 1.1s ease-in-out infinite; }
  .stage.run .think .dots i:nth-child(2){ animation-delay:.18s; }
  .stage.run .think .dots i:nth-child(3){ animation-delay:.36s; }
  .stage.run .shimmer{ animation:sweep 1.8s linear infinite; }
  .stage.run .caret{ animation:blink 1s steps(1) infinite; }

  /* La fabrication : les bandes se remplissent l'une apres l'autre */
  .stage.run .made .bars i{ transform:scaleX(0); }
  .stage.run .made.making .doing{ display:inline; }
  .stage.run .made.making .ok{ display:none; }
  .stage.run .made.making .bars i,
  .stage.run .made.ready .bars i{ animation:fill .44s cubic-bezier(.4,0,.2,1) forwards; }
  .stage.run .made.making .bars i:nth-child(2){ animation-delay:.44s; }
  .stage.run .made.making .bars i:nth-child(3){ animation-delay:.88s; }
  .stage.run .made.making .bars i:nth-child(4){ animation-delay:1.32s; }
  .stage.run .made.making .bars i:nth-child(5){ animation-delay:1.76s; }
  .stage.run .made.ready .bars i{ animation-duration:0s; }

  /* Un bouton presse */
  .press{ transition:transform .14s ease, opacity .14s ease; }
  .press.down{ transform:scale(.95); opacity:.82; }

  /* Le telephone : squelette qui scintille, puis l'app qui descend */
  .stage.run .scr{
    clip-path:inset(0 0 100% 0);
    transition:clip-path .75s cubic-bezier(.65,0,.35,1);
  }
  .stage.run .scr.shown{ clip-path:inset(0 0 0 0); }
  .stage.run .ld{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .stage.run .ld.shown{ opacity:1; transform:none; }
  .stage.run .skel b{ animation:sweep 1.6s linear infinite; }

  /* Ce qui change quand on se sert de l'app */
  .stage.run .tick,
  .stage.run .chk,
  .stage.run .face{ transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
  .stage.run .used-pop{ animation:pop .4s ease; }

  /* La progression de l'app en cours, sous sa pastille */
  .stage-wrap.playing .pick[aria-pressed="true"] .prog{ animation:fill var(--dur, 14s) linear forwards; }

  /* Les vignettes ne jouent que visibles */
  html.js .vig .scan{ animation:scan 6s ease-in-out infinite paused; }
  html.js .vig .fld,
  html.js .vig .hit,
  html.js .vig .reveal-on{ animation:appear 6s ease infinite paused both; }
  html.js .vig.in .scan,
  html.js .vig.in .fld,
  html.js .vig.in .hit,
  html.js .vig.in .reveal-on{ animation-play-state:running; }
  html.js .vig .fld:nth-child(1), html.js .vig .hit:nth-child(1){ animation-name:appear1; }
  html.js .vig .fld:nth-child(2), html.js .vig .hit:nth-child(2){ animation-name:appear2; }
  html.js .vig .fld:nth-child(3), html.js .vig .hit:nth-child(3){ animation-name:appear3; }
  html.js .vig .reveal-on{ animation-name:appear4; }
  html.js .vig .spin{ animation:spin-it 1s linear infinite; }

  .stream span{ transition:opacity .25s ease, filter .35s ease; }
  .stream.go span{ opacity:.0; filter:blur(4px); }
  .stream.go span.on{ opacity:1; filter:none; }

  /* Le panneau de changement */
  .sheet{ transition:transform .55s cubic-bezier(.32,.72,0,1); }
  .ph-morph.sheet-up .sheet{ transform:translateY(0); }
  .ph-morph.thinking .sheet .busy-line{ display:block; }
  .ph-morph.thinking .sheet .box{ display:none; }
  .ph-morph .flash.go::after{ animation:flash 1.1s ease; }
  .ph-morph.with-water .added{ animation:land .6s cubic-bezier(.2,.7,.3,1) both; }
  .ph-morph .shimmer{ animation:sweep 1.8s linear infinite; }
}

/* Sans mouvement, le panneau reste ouvert sur la premiere demande */
@media (prefers-reduced-motion: reduce){
  .sheet{ transform:none; }
}
html:not(.js) .sheet{ transform:none; }

@keyframes icon-in{ from{ opacity:0; transform:translateY(12px) scale(.86); } }
@keyframes tile{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes drift{ to{ transform:translate(6%, 8%) scale(1.12); } }
@keyframes spin{ to{ --ang:360deg; } }
@keyframes breath{ 50%{ opacity:.25; } }
@keyframes sweep{ to{ background-position:-50% 0; } }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes fill{ to{ transform:scaleX(1); } from{ transform:scaleX(0); } }
@keyframes pop{ 40%{ transform:scale(1.18); } }
@keyframes flash{ 0%{ opacity:0; } 20%{ opacity:1; } 100%{ opacity:0; } }
@keyframes land{ from{ opacity:0; transform:translateY(1.2em) scale(.97); } }
@keyframes spin-it{ to{ transform:rotate(360deg); } }
@keyframes scan{
  0%,8%  { opacity:0; transform:translateY(-100%); }
  12%    { opacity:1; }
  40%    { opacity:1; transform:translateY(200%); }
  46%,100%{ opacity:0; transform:translateY(200%); }
}
/* Chaque ligne arrive a son tour, reste, puis tout repart */
@keyframes appear1{ 0%,30%{ opacity:0; transform:translateY(6px); } 36%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes appear2{ 0%,40%{ opacity:0; transform:translateY(6px); } 46%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes appear3{ 0%,50%{ opacity:0; transform:translateY(6px); } 56%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes appear4{ 0%,62%{ opacity:0; transform:translateY(6px); } 68%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* Le squelette du telephone, avant que l'app n'arrive */
.skel{
  position:absolute;
  inset:0;
  padding:4.6em 1.35em 0;
  background:#0B0B0E;
}
.skel b{
  display:block;
  height:1em;
  border-radius:.5em;
  margin-top:.8em;
  background:linear-gradient(90deg, #17171C 0%, #17171C 35%, #24242B 50%, #17171C 65%, #17171C 100%);
  background-size:300% 100%;
  background-position:100% 0;
}
.skel b.t{ height:1.9em; width:70%; margin-top:2.2em; }
.skel b.h{ height:6.4em; border-radius:1.2em; margin-top:1.4em; }
.skel b.m{ height:9em; border-radius:1.2em; }
.skel b.s{ width:45%; }
.skel b.n{ width:85%; height:3em; border-radius:1.6em; margin-top:1em; }

/* ---------- Etats poses par le script ---------- */

/* Une seule app a la fois dans le telephone de la scene */
.stage .scr:not(.cur){ display:none; }

/* La ligne "Designing your app" n'existe que pendant que la scene joue */
.think{ display:none; }
.stage.run .think{ display:flex; }
.stage.run .think.gone{ display:none; }

/* Avant et apres le geste de l'utilisateur dans l'app */
.scr .af{ display:none; }
.scr.used .af{ display:inline; }
.scr.used .b4{ display:none; }
.used .sets tr.will td{ background:color-mix(in srgb, var(--a) 18%, transparent); }
.used .sets tr.will td:first-child{ border-radius:.6em 0 0 .6em; }
.used .sets tr.will td:last-child{ border-radius:0 .6em .6em 0; padding-right:.4em; }
.used .tick.hit-me,
.used .face.hit-me{ background:var(--a); color:var(--on); }
.used .chk.hit-me{ background:var(--a); border-color:var(--a); color:var(--on); }
.used .heat .hit-cell{ --l:70; }

/* Une vignette garde la famille de caracteres qu'on lui donne */
.vig.f-serif{ --hf:ui-serif, "New York", "Iowan Old Style", Georgia, serif; }

@media (max-width: 860px){
  .change-text h3{ margin-inline:auto; }
}

/* La scene reduite : sous 900px de large, elle garde sa taille de
   bureau et le script lui applique un zoom pour tenir dans l'ecran.
   Les marges en vw sont figees, sinon elles fondraient deux fois. */
.stage.fit{
  width:900px;
  padding:32px;
  gap:40px;
  border-radius:32px;
}