/* Pocketbot, prototype « poche » : v1 (« la poche avale la page »), mieux fini et plus vivant.
   Deux couleurs, inversées entre clair et sombre, et entre dehors et dedans. Aplats seulement. */

/* ───────── Jetons ───────── */
:root{
  --canvas:#F4EFE8; --ink:#0B0B0C; --live-out:#176B38; --live-in:#6BCC87;
  --stage-w:min(100vw, clamp(500px, 46.21vh, 640px));
  --u:calc(var(--stage-w) / 487.5);            /* un point de la scène de l’app, en pixels */
  --m:24px;                                     /* marge de page : 24, 40, 64, 96 */
  --display:clamp(2.75rem, min(12.4vw, 13.5vh), 7rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --bar-top:max(16px, env(safe-area-inset-top));
  --top-out:calc(var(--bar-top) + 28px + clamp(16px, 3.6vh, 40px));
  --top-in:calc(var(--bar-top) + 28px + clamp(12px, 2.4vh, 24px));
}
@media (min-width:600px){ :root{--m:40px} }
@media (min-width:960px){
  :root{--m:64px;--bar-top:clamp(20px, 3.6vh, 36px);--top-out:clamp(88px, 13.5vh, 128px);--top-in:clamp(96px, 21vh, 208px)}
}
@media (min-width:1280px){ :root{--m:96px} }
@media (min-width:960px) and (min-height:760px){ .display{max-width:9.6em} }
@media (prefers-color-scheme:dark){
  :root{--canvas:#09090A;--ink:#F1EBE2;--live-out:#6BCC87;--live-in:#176B38}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
svg{display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Dehors (toile, encre) et dedans (l’intérieur de la poche : tout s’inverse). */
.out{--fg:var(--ink);--bg:var(--canvas);--lv:var(--live-out);color:var(--fg)}
.in{--fg:var(--canvas);--bg:var(--ink);--lv:var(--live-in);color:var(--fg)}

a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1.5px;transition:text-underline-offset .25s var(--ease-out),text-decoration-thickness .25s var(--ease-out)}
a:hover{text-underline-offset:.34em;text-decoration-thickness:2.5px}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:var(--m);top:-80px;z-index:20;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--canvas);font-weight:600}
.skip:focus{top:12px}

/* ───────── Typographie ───────── */
.brand{font:600 1.125rem/1 "Inter Display","Inter",sans-serif;letter-spacing:-.01em}
.display{font:700 var(--display)/.96 "Inter Display","Inter",sans-serif;letter-spacing:-.035em;text-wrap:balance;margin-left:-.04em}
.lede{font-size:clamp(1.0625rem, .95rem + .45vw, 1.3125rem);line-height:1.45;max-width:31rem;text-wrap:pretty}
.soft{opacity:.72}
.fine{font-size:.9375rem;line-height:1.45}
.cta{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:26px;background:var(--fg);color:var(--bg);font:600 1.0625rem/1.2 "Inter",sans-serif;letter-spacing:-.005em;white-space:nowrap}
.peek{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500}
.peek svg{width:14px;height:14px;flex:none;transition:transform .35s var(--ease-out)}
.peek:hover svg,.peek:focus-visible svg{transform:translateY(4px)}
.eyebrow{display:flex;align-items:center;font:600 .8125rem/1.25 "Inter",sans-serif;letter-spacing:.012em}
.eyebrow .num{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;opacity:.62}
.eyebrow .num::after{content:"";width:24px;height:1.5px;margin:0 12px;background:currentColor}

/* ───────── Repère du haut : la marque, et l’état du réseau ───────── */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px;padding:var(--bar-top) var(--m) 0}
.net{display:none;align-items:center;gap:8px;font:600 .8125rem/1 "Inter",sans-serif;letter-spacing:.012em;font-variant-numeric:tabular-nums;white-space:nowrap}
.net-d{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.net.live .net-d{background:var(--lv);border-color:var(--lv);animation:pulse 1.1s var(--ease-io) infinite alternate}
.net.swap .net-t{animation:swap .34s var(--ease-out) both}
@keyframes pulse{from{transform:scale(.72)}to{transform:scale(1.18)}}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ───────── Version statique (sans animation) : un document qui se lit de haut en bas ───────── */
.out{background:var(--bg)}
.out-copy{padding:var(--top-out) var(--m) 0;display:grid;justify-items:start}
.hero .out-copy{padding-top:clamp(20px, 4vh, 48px)}
.out-copy .lede{margin-top:clamp(16px, 2.6vh, 28px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:clamp(20px, 3vh, 32px)}
.outro-copy .fine{margin-top:16px;max-width:26rem}
.fiche{display:grid;width:100%;max-width:26rem;margin-top:40px;font-size:.9375rem;line-height:1.4}
.fiche div{display:grid;grid-template-columns:6.5rem 1fr;gap:16px;padding:10px 0 11px;border-top:1px solid color-mix(in srgb, currentColor 20%, transparent)}
.fiche div:last-child{border-bottom:1px solid color-mix(in srgb, currentColor 20%, transparent)}
.fiche dt{opacity:.62}
.fiche dd{font-weight:500}

.still{width:100%;height:calc(500.5 * var(--u));margin-top:24px;--shell:var(--ink);--visor:var(--canvas)}
.sh{fill:var(--shell)} .vi{fill:var(--visor)} .ey{fill:var(--shell)}
.still .rm{fill:none;stroke:var(--visor);stroke-width:9;stroke-linejoin:round}
.smile{fill:none;stroke:var(--shell);stroke-width:12;stroke-linecap:round;opacity:0}
.beep,.pw,.cam,.rail{display:none}

.inside{background:var(--bg);padding:clamp(8px, 2vh, 24px) var(--m) clamp(48px, 10vh, 120px)}
.beat{display:grid;gap:32px;padding:clamp(32px, 6vh, 64px) 0;align-items:center}
.beat h2{font:700 clamp(1.875rem, 1.25rem + 2.9vw, 3.5rem)/1.02 "Inter Display","Inter",sans-serif;letter-spacing:-.03em;text-wrap:balance;margin:12px 0 0 -.03em}
.beat-copy > p,.ph{margin-top:clamp(12px, 1.8vh, 20px);max-width:31rem;line-height:1.5;letter-spacing:.005em;text-wrap:pretty}
.beat-copy > p,.ph > p,p.ph{opacity:.78}
.ph a{white-space:nowrap}
.beat strong{font-weight:600}
.carton h2 .ln,.lines h2 .ln{display:block}
.facts{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:16px;font:500 .9375rem/1.3 "Inter",sans-serif}
.facts li{display:flex;align-items:baseline;gap:6px}
.facts b{font:700 1.375rem/1 "Inter Display","Inter",sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.steps{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:16px;counter-reset:s;font:600 .9375rem/1.3 "Inter",sans-serif}
.steps li{counter-increment:s;padding-bottom:5px;border-bottom:2px solid transparent}
.steps li::before{content:counter(s);margin-right:8px;font-variant-numeric:tabular-nums;opacity:.62}
.cases{margin-top:8px;counter-reset:c;font-weight:500}
.cases li{counter-increment:c;display:flex;gap:12px;padding:3px 0}
.cases li::before{content:counter(c);font-weight:600;font-variant-numeric:tabular-nums;opacity:.62}
.obj{width:min(280px, 100%);height:auto;aspect-ratio:280/240;overflow:hidden}
@media (min-width:800px){
  .beat{grid-template-columns:minmax(0, 34rem) 280px;justify-content:space-between;gap:64px}
  .beat-copy > p,.ph{font-size:1.1875rem}
}

/* Objets plats : deux couleurs, un seul point vert pour l’état. */
.obj .f{fill:var(--fg)} .obj .g{fill:var(--bg)} .obj .lv{fill:var(--lv)}
.obj .sf{fill:none;stroke:var(--fg)} .obj .sg{fill:none;stroke:var(--bg)}
.obj .gf{fill:var(--bg);stroke:var(--fg)}
.obj text{font-family:"Inter",sans-serif;font-weight:600}
.obj .big{font-family:"Inter Display","Inter",sans-serif;font-weight:700;letter-spacing:-.02em}
.obj .num{font-variant-numeric:tabular-nums}
.obj .mer{vector-effect:non-scaling-stroke}
.obj .tagshape{stroke:var(--fg);stroke-width:6;stroke-linejoin:round}
.obj .taghalo{fill:var(--bg);stroke:var(--bg);stroke-width:14;stroke-linejoin:round}

/* ───────── L’étiquette : tout le reste, à lire ───────── */
.label{background:var(--bg);padding:clamp(72px, 13vh, 144px) var(--m) clamp(24px, 6vh, 64px)}
.label-head{display:grid;gap:20px;max-width:52rem;padding-bottom:clamp(48px, 9vh, 96px)}
.label-head h2{font:700 clamp(2.25rem, 1.35rem + 4.2vw, 5rem)/.98 "Inter Display","Inter",sans-serif;letter-spacing:-.035em;text-wrap:balance;margin-left:-.035em}
.row{display:grid;gap:24px;padding:24px 0 clamp(56px, 9vh, 104px);border-top:1px solid color-mix(in srgb, currentColor 22%, transparent)}
.row-h{display:grid;gap:8px;align-content:start}
.row-h h3{font:700 clamp(1.5rem, 1.2rem + 1.1vw, 2rem)/1.08 "Inter Display","Inter",sans-serif;letter-spacing:-.025em}
.row-h p{max-width:22rem;text-wrap:pretty}
.row-b{min-width:0}
.note{max-width:40rem;margin-top:24px;text-wrap:pretty}
@media (min-width:960px){
  .row{grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:64px;padding-top:32px}
  .row-h{position:sticky;top:32px}
}

/* Le catalogue : 18 lignes, sur deux colonnes dès qu’il y a la place. */
.models{display:grid;column-gap:48px}
.models li{display:grid;grid-template-columns:minmax(0, 1fr) 4.25rem 4.25rem;align-items:center;gap:12px;min-height:56px;padding:9px 0;border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent);transition:padding .3s var(--ease-out)}
.models li:hover{padding-left:8px}
.m-n{display:grid;gap:2px;min-width:0;font:600 1.0625rem/1.2 "Inter",sans-serif;letter-spacing:-.005em}
.m-n small{font:400 .875rem/1.25 "Inter",sans-serif;opacity:.66}
.m-s{font:500 .9375rem/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.m-t{justify-self:end;font:600 .8125rem/1 "Inter",sans-serif;padding:6px 10px 7px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.m-t.pro{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.models.folded li:nth-child(n+7){display:none}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0;border:0;background:none;color:inherit;font:600 1rem/1 "Inter",sans-serif;text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1.5px;cursor:pointer}
.more[hidden]{display:none}
@media (min-width:1180px){
  .models{grid-template-rows:repeat(9, auto);grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr)}
}

/* Gratuit, ou Pro : deux listes, puis la promesse en réserve. */
.plans{display:grid;gap:40px}
.plan h4{margin:0;font:700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1 "Inter Display","Inter",sans-serif;letter-spacing:-.03em}
.plan .sub{margin-top:8px;opacity:.72}
.plan ul{margin-top:20px}
.plan li{position:relative;padding:11px 0 12px 28px;border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);text-wrap:pretty}
.plan li::before{content:"";position:absolute;left:2px;top:19px;width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.promise{display:grid;gap:12px;margin-top:40px;padding:clamp(24px, 4vw, 40px);border-radius:24px;background:var(--fg);color:var(--bg)}
.promise p:first-child{display:flex;align-items:center;gap:10px;font:600 .8125rem/1.2 "Inter",sans-serif;letter-spacing:.012em}
.promise i{width:9px;height:9px;border-radius:50%;background:var(--live-out);flex:none}
.in .promise i{background:var(--live-out)}
.promise strong{font:700 clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem)/1.06 "Inter Display","Inter",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.promise .fine{max-width:34rem}
@media (min-width:700px){ .plans{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:48px} }

/* Questions fréquentes. */
.faq details{border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.faq details:first-child{border-top:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.faq summary{display:grid;grid-template-columns:minmax(0, 1fr) 24px;align-items:center;gap:24px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font:600 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.3 "Inter",sans-serif;letter-spacing:-.005em;text-wrap:balance;transition:padding .3s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{padding-left:8px}
.faq summary i{position:relative;width:24px;height:24px;transition:transform .4s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:4px;top:11px;width:16px;height:2px;border-radius:1px;background:currentColor}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{max-width:38rem;padding:0 48px 24px 0;opacity:.8;text-wrap:pretty}

/* Fiche technique. */
.sheet{display:grid}
.sheet div{display:grid;gap:4px;padding:14px 0 16px;border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.sheet div:first-child{border-top:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.sheet dt{font:500 .9375rem/1.4 "Inter",sans-serif;opacity:.62}
.sheet dd{max-width:40rem;font-weight:500;text-wrap:pretty}
.sheet dd ol{counter-reset:c;margin-top:6px}
.sheet dd li{counter-increment:c;display:flex;gap:12px;padding:3px 0}
.sheet dd li::before{content:counter(c);font-weight:600;opacity:.62;font-variant-numeric:tabular-nums}
.sheet dd small{display:block;margin-top:4px;font-size:.9375rem;font-weight:400;opacity:.72}
@media (min-width:700px){ .sheet div{grid-template-columns:12rem minmax(0, 1fr);gap:32px} }

.foot{background:var(--bg);padding:clamp(40px, 8vh, 80px) var(--m) max(32px, env(safe-area-inset-bottom));display:grid;gap:24px;border-top:1px solid color-mix(in srgb, currentColor 22%, transparent)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot nav a,.foot .mail a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.foot .fine{opacity:.72}
/* Choix de la langue : chaque langue dans sa langue, celle de la page en gras. Vide dans le prototype. */
.foot .langs{gap:4px 24px}
.foot .langs:empty{display:none}
.foot .langs a{opacity:.72;text-decoration-color:transparent}
.foot .langs a:hover,.foot .langs a:focus-visible,.foot .langs a[aria-current]{opacity:1}
.foot .langs a:hover,.foot .langs a:focus-visible{text-decoration-color:currentColor}
.foot .langs a[aria-current]{font-weight:700}
@media (min-width:800px){
  .foot{grid-template-columns:1fr auto;align-items:end}
  .foot .lead{grid-column:1 / -1}
  .foot .fine{justify-self:end;grid-column:2}
  .foot .mail{grid-row:2;grid-column:2;justify-self:end}
}
.foot .lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}

/* ───────── Version animée : une scène épinglée, pilotée par le défilement ───────── */
.anim .story{position:relative;height:1500vh}
.anim .stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--canvas);contain:layout paint}
.anim .still{display:none}
.anim .bar{position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none}
.anim .net{display:flex}
.anim .out{position:absolute;inset:0;background:none;z-index:1;pointer-events:none}
.anim .out-copy{position:absolute;left:0;right:0;top:0;padding-top:var(--top-out);pointer-events:auto}
.anim .beep{display:block;position:absolute;left:0;top:0;transform-origin:0 0}
.anim .beep-a{z-index:2;will-change:transform;--shell:var(--ink);--visor:var(--canvas)}
.anim .beep-b{--shell:var(--canvas);--visor:var(--ink)}
.anim .pw{display:block;position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.anim .pw-out{z-index:3;will-change:transform}
.anim .pocket{position:absolute;left:0;top:0;width:100%}
.anim .pw-out .pocket{background:var(--ink)}
.anim .pw-in .pocket{background:var(--canvas)}
.anim .rim{position:absolute;left:0;top:0;width:100%;overflow:visible}
.anim .rim path{fill:none;stroke-linejoin:round;stroke-linecap:butt}
.anim .pw-out .rim path{stroke:var(--canvas)}
.anim .pw-in .rim path{stroke:var(--ink)}
.anim .ko{position:absolute;left:0;top:0;width:100%;height:100vh;height:100lvh}
.anim .ko .out-copy{pointer-events:none}
.anim .inside{position:absolute;inset:0;z-index:4;padding:0;background:none;pointer-events:none}
.anim .cam{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;transform-origin:0 0;pointer-events:none}
.anim .inside > .bar{z-index:5;opacity:0}
.anim .beat{display:block;padding:0}
.anim .beat-copy{position:absolute;left:var(--m);right:var(--m);top:var(--top-in);z-index:4;opacity:0;pointer-events:none}
.anim .beat-copy.live{pointer-events:auto}
.anim .obj{position:absolute;left:0;top:0;z-index:1;visibility:hidden;overflow:visible;aspect-ratio:auto;transform-origin:50% 50%}
.anim .phases{display:grid}
.anim .ph{grid-area:1 / 1;opacity:0;pointer-events:none}
.anim .beat-copy.live .ph.live{pointer-events:auto}
.anim .steps li{opacity:.42;transition:opacity .35s var(--ease-out),border-color .35s var(--ease-out)}
.anim .steps li.on{opacity:1;border-color:currentColor}
.anim .cases li{opacity:.3;transition:opacity .35s var(--ease-out)}
.anim .cases li.on{opacity:1}
.anim .carton .ln,.anim .lines .ln{opacity:.26;transition:opacity .45s var(--ease-out)}
.anim .carton .ln.on,.anim .lines .ln.on{opacity:1}

/* Côte à côte : texte à gauche, Beep et son objet à droite (ordinateur, téléphone couché). */
.side .beat-copy{right:auto;width:var(--colw, 34rem)}
.side .hero-copy .lede{max-width:min(31rem, var(--colw, 31rem))}
.side.anim .fiche{position:absolute;left:auto;right:var(--m);top:calc(var(--top-out) + .14 * var(--display));width:var(--fichew, 24rem);margin:0}
.side.anim .outro-copy .fiche{width:var(--fichew2, 24rem)}
.anim:not(.side) .fiche,.anim.short .fiche,.anim.nofiche .hero-copy .fiche,.anim.nofiche2 .outro-copy .fiche{display:none}
@media (max-width:1099px){ .anim .fiche{display:none} }
/* Très gros plan, yeux plein écran : le carton tient entre les deux yeux. */
.eyes .carton{left:var(--cu-x);right:auto;width:var(--cu-w)}
.side:not(.eyes) .carton{right:var(--m);width:auto}
.eyes .carton h2{font-size:var(--cu-f);margin-top:10px}

/* Écrans bas. */
@media (max-height:700px){
  .anim .hero-copy .peek{display:none}
  .anim .beat h2{font-size:clamp(1.625rem, 1.05rem + 2.6vw, 2.75rem);margin-top:8px}
  .anim .beat-copy > p,.anim .ph{font-size:1rem;line-height:1.42;margin-top:10px}
  .anim .facts,.anim .steps{margin-top:10px}
  .anim .facts b{font-size:1.125rem}
}
@media (max-height:520px){
  :root{--display:clamp(2rem, 11.5vh, 3.25rem);--top-out:calc(var(--bar-top) + 28px + 8px);--top-in:calc(var(--bar-top) + 28px + 6px)}
  .anim .out-copy .lede{margin-top:10px;font-size:1rem;line-height:1.4}
  .anim .actions{margin-top:12px}
  .anim .cta{min-height:44px}
  .anim .beat h2{font-size:clamp(1.375rem, 6.4vh, 2rem)}
  .anim .beat-copy > p,.anim .ph{font-size:.9375rem;line-height:1.4;margin-top:8px}
  .anim .outro-copy .fine{margin-top:8px}
}

/* Repère de progression : huit traits sur le bord droit, celui du chapitre en cours s’allonge. */
.anim .rail{display:grid;gap:7px;position:absolute;right:max(8px, calc(var(--m) / 2 - 1px));top:50%;z-index:5;margin-top:-64px;opacity:0;pointer-events:none}
.anim .rail i{display:block;width:2px;height:10px;border-radius:1px;background:currentColor;opacity:.3;transform-origin:50% 50%;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.anim .rail i.done{opacity:.62}
.anim .rail i.on{opacity:1;transform:scaleY(2.2)}

/* Entrée de la première image : le texte monte, ligne après ligne. */
.anim .hero-copy > *{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--i, 0) * 70ms + 80ms)}
.anim .ko .hero-copy > *{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* L’étiquette se découvre en montant, une fois. */
.anim .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d, 0) * 70ms)}
.anim .rv.seen{opacity:1;transform:none}