/* Coloc — tokens et composants J1. Noms de tokens alignés sur SwiftUI (surface.primary -> --s1, etc.) */

.cl{
  --ff:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  --ffr:ui-rounded,"SF Pro Rounded","Nunito",-apple-system,system-ui,sans-serif;
  --ffm:ui-monospace,"SF Mono",Menlo,monospace;
  font-family:var(--ff);color:var(--tx);-webkit-font-smoothing:antialiased;
}
.t-light{
  color-scheme:light;
  --bg:#F7F5F2;--s1:#FFFFFF;--s2:#EFECE7;--tx:#1D1C1A;--tx2:#6B6862;--sep:#E3DFD8;--draft-edge:#CCC5BA;
  --sage-f:#DCEBDD;--sage-i:#2F5D3A;--butter-f:#F7EDC6;--butter-i:#6E5A12;--stone-f:#E7E4DF;--stone-i:#4A4741;
  --sky-f:#DCE8F5;--sky-i:#24507A;--lavender-f:#E6E0F5;--lavender-i:#4E3D84;--rose-f:#F6DEE4;--rose-i:#8A2F4A;
  --peach-f:#FBE3D3;--peach-i:#8A4520;--mint-f:#D5EEEA;--mint-i:#1F5F57;
  --char-ink:#14143F;--accent:#5B5BF0;--accent-ink:#FFFFFF;--accent-soft:#E6E6FD;--accent-deep:#3A3AC8;--comp-edge:#AEAEF8;
  --glow:rgba(91,91,240,.26);--glow-strong:rgba(91,91,240,.42);--glow-night:rgba(168,148,232,.24);
  --glass:rgba(255,255,255,.62);--glass-hi:rgba(255,255,255,.92);--glass-edge:rgba(255,255,255,.95);
  --glass-sh:0 10px 30px rgba(70,45,25,.10),0 1px 3px rgba(70,45,25,.06);--tab-on:rgba(29,28,26,.07);
  --card-sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --pilou-shadow:rgba(110,60,25,.16);
  --success:#34C759;--warning:#FF9500;--danger:#FF3B30;--info:#007AFF;
  --h-sage:rgba(140,205,150,.75);--h-butter:rgba(246,214,110,.65);--h-peach:rgba(246,160,105,.8);
  --h-rose:rgba(242,150,182,.6);--h-sky:rgba(130,180,240,.7);--h-lav:rgba(180,160,240,.6);
  --wall-a:#F3D9C3;--wall-b:#E6D3F0;--wall-c:#F7E7B9;
}
.t-dark{
  color-scheme:dark;
  --bg:#141416;--s1:#1E1E21;--s2:#2A2A2E;--tx:#F2F0EC;--tx2:#A3A09A;--sep:#34343A;--draft-edge:#4C4C53;
  --sage-f:#23332A;--sage-i:#A8D5B3;--butter-f:#34301C;--butter-i:#EBD98E;--stone-f:#2B2A28;--stone-i:#CFCAC2;
  --sky-f:#1F2C3B;--sky-i:#A9CBEF;--lavender-f:#2A2540;--lavender-i:#C9BCF2;--rose-f:#3A2329;--rose-i:#F0B3C3;
  --peach-f:#3A2A20;--peach-i:#F5C2A0;--mint-f:#1D3330;--mint-i:#9FDCD2;
  --char-ink:#14143F;--accent:#5B5BF0;--accent-ink:#FFFFFF;--accent-soft:#23234A;--accent-deep:#B9B9FF;--comp-edge:#3C3C8E;
  --glow:rgba(91,91,240,.24);--glow-strong:rgba(91,91,240,.38);--glow-night:rgba(150,130,230,.18);
  --glass:rgba(42,42,46,.58);--glass-hi:rgba(255,255,255,.14);--glass-edge:rgba(255,255,255,.12);
  --glass-sh:0 10px 30px rgba(0,0,0,.35);--tab-on:rgba(255,255,255,.12);
  --card-sh:none;
  --pilou-shadow:rgba(0,0,0,.5);
  --success:#30D158;--warning:#FF9F0A;--danger:#FF453A;--info:#0A84FF;
  --h-sage:rgba(120,190,135,.42);--h-butter:rgba(230,200,100,.34);--h-peach:rgba(246,160,105,.5);
  --h-rose:rgba(240,140,175,.36);--h-sky:rgba(120,170,235,.42);--h-lav:rgba(170,150,240,.38);
  --wall-a:#3A2418;--wall-b:#251E3A;--wall-c:#3A3218;
}
.tp-sage{--f:var(--sage-f);--i:var(--sage-i)}
.tp-butter{--f:var(--butter-f);--i:var(--butter-i)}
.tp-stone{--f:var(--stone-f);--i:var(--stone-i)}
.tp-sky{--f:var(--sky-f);--i:var(--sky-i)}
.tp-lavender{--f:var(--lavender-f);--i:var(--lavender-i)}
.tp-rose{--f:var(--rose-f);--i:var(--rose-i)}
.tp-peach{--f:var(--peach-f);--i:var(--peach-i)}
.tp-mint{--f:var(--mint-f);--i:var(--mint-i)}
.tp-pilou{--f:var(--accent-soft);--i:var(--accent-deep)}

/* Appareil et mise en page des planches */
.duo{display:flex;gap:64px;padding:14px;box-sizing:border-box}
.phone{position:relative;flex:none;width:390px;height:844px;border-radius:56px;overflow:hidden;background:var(--bg);
  box-shadow:0 0 0 9px #111113,0 0 0 10px #303034,0 24px 50px rgba(0,0,0,.16);isolation:isolate}
.abs{position:absolute}

/* Lueur de Pilou (section 2.4) */
.glow{position:absolute;left:0;right:0;bottom:0;height:260px;pointer-events:none;z-index:0;
  background:radial-gradient(117px 170px at 290px 100%,var(--glow),transparent)}
.glow.st{background:radial-gradient(140px 210px at 290px 100%,var(--glow-strong),transparent)}
.glow.night{background:radial-gradient(117px 170px at 290px 100%,var(--glow-night),transparent)}
.glow.off{display:none}

/* Fil de conversation */
.hdr{position:absolute;top:54px;left:0;right:0;height:52px;padding:0 16px 0 14px;display:flex;align-items:center;gap:8px;z-index:3;box-sizing:border-box}
.hdr .nm{font:700 17px/1 var(--ffr)}
.av{width:44px;height:44px;border:0;padding:0;background:transparent;display:grid;place-items:center;border-radius:22px;margin-right:-6px}
.ctx{margin-left:auto;height:36px;padding:0 12px 0 10px;border-radius:18px;display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--ff);color:var(--tx);border:0}
.fil{position:absolute;left:0;right:0;top:108px;bottom:218px;overflow:hidden;padding:4px 20px 0;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;z-index:1}
.fil.end{justify-content:flex-end;padding-bottom:0}
.fade-t{-webkit-mask-image:linear-gradient(transparent 0,#000 56px);mask-image:linear-gradient(transparent 0,#000 56px)}
.fade-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.ptext{font-size:17px;line-height:1.4;margin:0;text-wrap:pretty}
.ptext b,.list b{font-weight:600}
.ph{font:700 15px/1.2 var(--ffr);margin:0 0 4px;color:var(--tx)}
.stamp{font-size:13px;color:var(--tx2);margin:0;text-align:center}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.list li{display:flex;gap:10px;align-items:baseline;font-size:17px;line-height:1.4}
.list .tm{flex:none;width:40px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tx2);font-size:15px}
.list .pt{flex:none;width:6px;height:6px;border-radius:3px;background:var(--tx2);transform:translateY(-3px)}
.me{align-self:flex-end;max-width:78%;background:var(--tx);color:var(--bg);border-radius:20px 20px 6px 20px;padding:10px 14px;font-size:17px;line-height:1.35;box-sizing:border-box}
.them{align-self:flex-start;max-width:82%;background:var(--s1);border-radius:20px 20px 20px 6px;padding:10px 14px;font-size:17px;line-height:1.35;box-shadow:var(--card-sh);box-sizing:border-box}
.them .who{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2);margin-bottom:4px}

/* L4 : carré de couleur à point */
.sq{flex:none;width:28px;height:28px;border-radius:6px;background:var(--f);display:inline-grid;place-items:center;color:var(--i);font:700 13px/1 var(--ffr)}
.sq::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--i)}
.sq.ini::after{display:none}
.sq.on{background:var(--i);color:var(--f)}
.sq.on::after{background:var(--f)}
.sq.s14{width:14px;height:14px;border-radius:3.5px}.sq.s14::after{width:5px;height:5px}
.sq.s18{width:18px;height:18px;border-radius:4px}.sq.s18::after{width:6px;height:6px}
.sq.s40{width:40px;height:40px;border-radius:9px;font-size:16px}.sq.s40::after{width:12px;height:12px}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 5px;border-radius:12px;background:var(--f);color:var(--i);font:600 13px/1 var(--ff);vertical-align:1px;white-space:nowrap;box-sizing:border-box}

/* Cartes */
.card{position:relative;background:var(--s1);border-radius:18px;padding:16px;box-shadow:var(--card-sh);display:flex;flex-direction:column;gap:10px;box-sizing:border-box;--hole:var(--s1)}
.card.lg{border-radius:22px}
.lbl{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--i);min-height:18px}
.lbl .when{margin-left:auto;color:var(--tx2);letter-spacing:0;text-transform:none;font-weight:400;font-size:13px}
.lt{font:700 34px/1.12 var(--ffr);margin:0;letter-spacing:-.01em}
.t1{font:700 28px/1.15 var(--ffr);margin:0;letter-spacing:-.01em}
.t2{font:600 22px/1.25 var(--ffr);margin:0;text-wrap:balance}
.t3{font:600 20px/1.25 var(--ffr);margin:0;text-wrap:balance}
.hl{font:600 17px/1.3 var(--ff);margin:0}
.callout{font-size:16px;line-height:1.4;margin:0;text-wrap:pretty}
.meta{font-size:13px;line-height:1.35;color:var(--tx2);margin:0}
.sec{font:600 13px/1 var(--ff);color:var(--tx2);letter-spacing:.06em;text-transform:uppercase;margin:0}
.draft{position:relative;background:var(--s2);border-radius:12px;padding:11px 13px;font-size:16px;line-height:1.4;outline:1.5px dashed var(--draft-edge);outline-offset:-1.5px;margin:0}
.draft .dl{display:block;font:600 11px/1 var(--ff);letter-spacing:.07em;text-transform:uppercase;color:var(--tx2);margin-bottom:6px}
.quote{background:var(--s2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.quote .who{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2)}
.quote p{margin:0;font-size:15px;line-height:1.38}
.mono{font-family:var(--ffm);font-size:13px}

/* Boutons */
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;height:44px;padding:0 18px;border-radius:22px;font:600 16px/1 var(--ff);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box}
.btn.sm{height:36px;padding:0 14px;font-size:15px;border-radius:18px}
.btn.p{background:var(--tx);color:var(--bg)}
.btn.s{background:var(--s2);color:var(--tx)}
.btn.g{background:transparent;color:var(--tx2);padding:0 10px}
.btn.a{background:var(--accent);color:var(--accent-ink)}
.btn.w{flex:1}
.ib{width:44px;height:44px;border-radius:22px;border:0;display:grid;place-items:center;color:var(--tx);padding:0}
.slot{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;background:var(--s2);font:600 15px/1 var(--ff);color:var(--tx);border:0;gap:6px}
.slot.on{background:var(--accent-soft);color:var(--accent-deep);box-shadow:inset 0 0 0 1.5px var(--accent)}
.fchip{height:34px;padding:0 14px;border-radius:17px;background:var(--s2);font:600 14px/1 var(--ff);color:var(--tx);border:0;white-space:nowrap}
.fchip.on{background:var(--tx);color:var(--bg)}

/* Verre (couche de navigation uniquement) */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);box-shadow:var(--glass-sh),inset 0 0 0 .5px var(--glass-edge)}

/* Listes */
.row{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 20px;box-sizing:border-box}
.row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:.5px solid var(--sep);align-self:stretch;justify-content:center}
.row .tx .top{display:flex;align-items:baseline;gap:8px}
.row .tx .top .hl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.on{background:var(--s2)}
.cnt{min-width:20px;height:20px;border-radius:10px;background:var(--s2);color:var(--tx);font:600 12px/20px var(--ff);text-align:center;padding:0 6px;box-sizing:border-box}
.pend{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:10px;background:var(--accent-soft);color:var(--accent-deep);font:600 12px/1 var(--ff)}
.badge{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:700 11px/18px var(--ff);text-align:center;padding:0 5px;box-sizing:border-box}

/* L3 : étapes à halo reliées par des pointillés */
.stp{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;background:var(--s1);font:600 15px/1 var(--ff);color:var(--tx);white-space:nowrap;box-sizing:border-box}
.stp.done{box-shadow:0 0 10px 3px var(--h-sage),0 0 24px 8px var(--h-butter)}
.stp.cur{box-shadow:0 0 12px 4px var(--h-peach),0 0 28px 10px var(--h-rose);animation:halo 2.4s ease-in-out infinite}
.stp.next{background:transparent;color:var(--tx2);box-shadow:inset 0 0 0 1.5px var(--sep)}
.stp.sky{box-shadow:0 0 10px 3px var(--h-sky),0 0 24px 8px var(--h-lav)}
.stp.sm{height:30px;padding:0 12px;font-size:13px;border-radius:15px}
@keyframes halo{0%,100%{box-shadow:0 0 12px 4px var(--h-peach),0 0 28px 10px var(--h-rose)}50%{box-shadow:0 0 16px 6px var(--h-rose),0 0 34px 14px var(--h-butter)}}
.node{flex:none;width:7px;height:7px;background:var(--tx)}
.dash-h{flex:1;height:0;border-top:1.5px dashed var(--tx2);opacity:.7}
.dash-v{width:0;border-left:1.5px dashed var(--tx2);opacity:.7}

/* L5 : grain et dégradés flous. Grain 180 px en mosaïque, gris moucheté, par-dessus deux ou trois dégradés radiaux de la teinte du sujet */
.grain{position:relative;overflow:hidden}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .41  0 0 0 0 .39  2.5 0 0 0 -.86'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.t-dark .grain::after{opacity:.45;mix-blend-mode:screen}
.tp-lavender{--g1:#B9A6F2;--g2:#F2B3C8;--g3:#E9E2FA}
.tp-peach{--g1:#F5CB7A;--g2:#EE9A62;--g3:#FBE6D6}
.tp-sky{--g1:#8DB8F0;--g2:#9EDCCB;--g3:#E3ECF8}
.tp-sage{--g1:#A9D9A8;--g2:#F0DE8E;--g3:#E3F0E2}
.tp-butter{--g1:#F3D27A;--g2:#F5B48A;--g3:#FAF1D6}
.tp-rose{--g1:#F2A9C0;--g2:#C7B4F2;--g3:#F9E6EB}
.tp-mint{--g1:#94D8C8;--g2:#BFD98F;--g3:#DFF2EE}
.tp-stone{--g1:#CFC8BE;--g2:#E8D6BE;--g3:#EFECE7}
.t-dark .tp-lavender,.t-dark.tp-lavender{--g1:#4E3E8C;--g2:#7A3A55;--g3:#2A2540}
.t-dark .tp-peach,.t-dark.tp-peach{--g1:#7A5A20;--g2:#8A4520;--g3:#3A2A20}
.t-dark .tp-sky,.t-dark.tp-sky{--g1:#2A4F86;--g2:#1F5F57;--g3:#1F2C3B}
.t-dark .tp-sage,.t-dark.tp-sage{--g1:#2F5D3A;--g2:#6E5A12;--g3:#23332A}
.t-dark .tp-butter,.t-dark.tp-butter{--g1:#6E5A12;--g2:#8A4520;--g3:#34301C}
.t-dark .tp-rose,.t-dark.tp-rose{--g1:#8A2F4A;--g2:#4E3D84;--g3:#3A2329}
.t-dark .tp-mint,.t-dark.tp-mint{--g1:#1F5F57;--g2:#4F6420;--g3:#1D3330}
.t-dark .tp-stone,.t-dark.tp-stone{--g1:#4A4741;--g2:#5A4A38;--g3:#2B2A28}
.tile{position:relative;overflow:hidden;flex:none;display:grid;place-items:center;color:var(--i);font:800 var(--ts,17px)/1 var(--ffr);letter-spacing:.01em;border-radius:28%;--hole:var(--g3);
  background:radial-gradient(95% 95% at 18% 18%,var(--g1) 0%,transparent 100%),radial-gradient(100% 100% at 86% 86%,var(--g2) 0%,transparent 100%),var(--g3)}
.tile>*{position:relative;z-index:1}
.head-grain{background:radial-gradient(75% 130% at 8% 0%,var(--g1) 0%,transparent 100%),radial-gradient(80% 140% at 96% 100%,var(--g2) 0%,transparent 100%),radial-gradient(70% 90% at 55% 35%,var(--g3) 0%,transparent 100%),var(--g3)}
.pillbtn{height:40px;padding:0 16px;border-radius:20px;border:0;display:inline-flex;align-items:center;gap:6px;font:600 17px/1 var(--ff);color:var(--tx);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.8)}
.t-dark .pillbtn{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
.hbar{height:8px;border-radius:4px;background:rgba(127,127,127,.22);overflow:hidden}
.hbar>span{display:block;height:100%;border-radius:4px;background:var(--i)}

/* L3 : étapes en zigzag, capsules blanches à halo bicolore, pointillés et nœuds carrés */
.zz{position:relative}
.zs{position:absolute;height:36px;border-radius:18px;background:var(--s1);display:inline-flex;align-items:center;gap:8px;padding:0 16px;font:600 15px/1 var(--ff);color:var(--tx);white-space:nowrap;box-sizing:border-box}
.zs .m{font-weight:400;color:var(--tx2)}
.zs.h1{box-shadow:-10px 0 18px 1px var(--h-sage),10px 0 18px 1px var(--h-butter)}
.zs.h2{box-shadow:-10px 0 18px 1px var(--h-rose),10px 0 18px 1px var(--h-butter)}
.zs.h3{box-shadow:-10px 0 18px 1px var(--h-sky),10px 0 18px 1px var(--h-rose);animation:zhalo 2.6s ease-in-out infinite}
.zs.h4{box-shadow:-10px 0 18px 1px var(--h-lav),10px 0 18px 1px var(--h-sage)}
.zs.nx{background:transparent;box-shadow:none;outline:1.5px dashed var(--tx2);outline-offset:-1.5px;color:var(--tx2);opacity:.85}
@keyframes zhalo{0%,100%{box-shadow:-10px 0 18px 1px var(--h-sky),10px 0 18px 1px var(--h-rose)}50%{box-shadow:-12px 0 24px 3px var(--h-rose),12px 0 24px 3px var(--h-sky)}}
.srcchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px;background:var(--s2);font:500 13px/1 var(--ff);color:var(--tx2)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;border-radius:20px;background:var(--s2)}
.seg button{height:36px;border:0;border-radius:17px;background:transparent;font:600 14px/1 var(--ff);color:var(--tx2)}
.seg button.on{background:var(--s1);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.zline{position:absolute;inset:0;pointer-events:none;overflow:visible}
.blur-lav{background:radial-gradient(60% 80% at 15% 20%,#C9B8F0 0,transparent 70%),radial-gradient(55% 70% at 85% 30%,#F7C3A6 0,transparent 70%),radial-gradient(60% 80% at 60% 100%,#F3D78C 0,transparent 70%),#E6E0F5}
.t-dark .blur-lav{background:radial-gradient(60% 80% at 15% 20%,#4A3C7A 0,transparent 70%),radial-gradient(55% 70% at 85% 30%,#6B3E2A 0,transparent 70%),radial-gradient(60% 80% at 60% 100%,#5A4A1C 0,transparent 70%),#2A2540}
.blur-head{background:radial-gradient(70% 90% at 10% 0%,var(--h-lav),transparent 70%),radial-gradient(60% 80% at 95% 10%,var(--h-peach),transparent 70%),radial-gradient(70% 70% at 50% 110%,var(--h-butter),transparent 70%),var(--f)}
.wall{background:radial-gradient(70% 50% at 20% 20%,var(--wall-a),transparent 70%),radial-gradient(70% 55% at 85% 45%,var(--wall-b),transparent 70%),radial-gradient(80% 50% at 40% 95%,var(--wall-c),transparent 70%),var(--bg)}

/* Planches */
.bd{background:var(--bg);color:var(--tx);box-sizing:border-box}
.bd h1{font:800 64px/1 var(--ffr);margin:0;letter-spacing:-.02em}
.bd h2{font:700 30px/1.1 var(--ffr);margin:0 0 20px;letter-spacing:-.01em}
.bd h3{font:700 18px/1.2 var(--ffr);margin:0}
.tok{font-family:var(--ffm);font-size:12px;color:var(--tx2)}
.panel{border-radius:28px;padding:32px;box-sizing:border-box;background:var(--bg);color:var(--tx)}
.sw{width:56px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}

/* Pilou : boucles d'animation (poses fixes si Réduire les animations) */
.pl-a{transform-box:fill-box;transform-origin:50% 100%}
.pl-face,.pl-s1,.pl-s5{animation:pl-breathe 4s ease-in-out infinite}
.pl-s9{animation:pl-breathe 6.5s ease-in-out infinite}
.pl-s2{animation:pl-listen 1.1s ease-in-out infinite}
.pl-s3{animation:pl-sway 2.6s ease-in-out infinite}
.pl-s4{animation:pl-hop .7s ease-in-out infinite}
.pl-s6{animation:pl-work .55s ease-in-out infinite}
.pl-s7,.pl-e4{animation:pl-jump 1.6s cubic-bezier(.3,.7,.4,1) infinite}
.pl-s8{animation:pl-sway 3.4s ease-in-out infinite}
.pl-s10{animation:pl-stretch 3.2s ease-in-out infinite}
.pl-blink{transform-box:fill-box;transform-origin:50% 50%;animation:pl-blink 5.5s infinite}
@keyframes pl-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.035)}}
@keyframes pl-listen{0%,100%{transform:scale(1,1)}30%{transform:scale(1.03,.97)}60%{transform:scale(.98,1.03)}}
@keyframes pl-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pl-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-3%)}}
@keyframes pl-work{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.01,.99)}}
@keyframes pl-jump{0%,60%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.08,.9)}25%{transform:translateY(-12%) scale(.96,1.05)}42%{transform:translateY(0) scale(1.05,.95)}}
@keyframes pl-stretch{0%,100%{transform:scale(1,1)}45%{transform:scale(.94,1.08)}}
@keyframes pl-blink{0%,95%,100%{transform:scale(1,1)}97%{transform:scale(1,.1)}}
@media (prefers-reduced-motion:reduce){.pl-a,.pl-blink,.stp.cur,.zs.h3{animation:none!important}}

/* Exploration Pilou : 8 directions. Pose = transition entre états, boucle = animation propre à l'état */
.ex{overflow:visible}
.ex *{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s cubic-bezier(.34,1.45,.64,1),opacity .35s ease,d .5s cubic-bezier(.34,1.3,.64,1)}
.ex .ob{transform-origin:50% 100%}
.ex .blk{animation:ex-blink 4.6s infinite}
.ex-termine .blk{animation:none}
.ex .stk{fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes ex-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes ex-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes ex-wobble{0%,100%{transform:scale(1,1)}25%{transform:scale(1.04,.96)}50%{transform:scale(.97,1.03)}75%{transform:scale(1.02,.98)}}
@keyframes ex-hop{0%,70%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.1,.9)}30%{transform:translateY(-14%) scale(.94,1.07)}48%{transform:translateY(0) scale(1.06,.94)}58%{transform:translateY(0) scale(.98,1.02)}}
@keyframes ex-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ex-sway-s{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes ex-glance{0%,35%{transform:translate(-4px,0)}45%,55%{transform:translate(0,-2px)}65%,90%{transform:translate(4px,0)}100%{transform:translate(-4px,0)}}
@keyframes ex-orbit{0%{transform:translate(0,-4px)}25%{transform:translate(4px,0)}50%{transform:translate(0,4px)}75%{transform:translate(-4px,0)}100%{transform:translate(0,-4px)}}
@keyframes ex-peek{0%,30%{transform:translateX(-4px)}45%,75%{transform:translateX(4px)}90%,100%{transform:translateX(-4px)}}
@keyframes ex-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes ex-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,1.04)}}
@keyframes ex-waddle{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(0) translateY(-3px)}50%{transform:rotate(5deg) translateY(0)}75%{transform:rotate(0) translateY(-3px)}}
@keyframes ex-talk{0%,100%{transform:scale(1,1)}50%{transform:scale(.85,1.2)}}
@keyframes ex-draw{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes li-trace{0%{stroke-dashoffset:100}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes tr-drift{0%,100%{transform:translate(0,0)}33%{transform:translate(-3px,1px)}66%{transform:translate(3px,-1px)}}
@keyframes te-pop{0%,75%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(-16px) scale(.94,1.08)}28%{transform:translateY(0) scale(1.08,.92)}40%{transform:translateY(0) scale(1,1)}}

/* A Trait */
.tr-happy{opacity:0}
.tr-squig{opacity:0;stroke-dasharray:100;stroke-dashoffset:100}
.ex-veille .tr-drift{animation:tr-drift 7s ease-in-out infinite}
.ex-ecoute .tr-fpos{transform:translate(5px,-4px)}
.ex-ecoute .tr-bl,.ex-ecoute .tr-br{transform:translateY(-3px)}
.ex-ecoute .tr-loop{animation:ex-pulse 1.1s ease-in-out infinite}
.ex-reflexion .tr-face{opacity:0;transform:scale(.5)}
.ex-reflexion .tr-squig{opacity:1;animation:ex-draw 2.6s ease-in-out infinite}
.ex-termine .tr-eyes{opacity:0}
.ex-termine .tr-happy{opacity:1}
.ex-termine .tr-bl,.ex-termine .tr-br{transform:translateY(-4px)}
.ex-termine .tr-loop{animation:ex-hop 1.8s infinite}
.ex-souci .tr-bl{transform:rotate(-20deg) translateY(1px)}
.ex-souci .tr-br{transform:rotate(20deg) translateY(1px)}
.ex-souci .tr-fpos{transform:translate(-2px,4px)}
.ex-souci .tr-loop{animation:ex-sway-s 3.4s ease-in-out infinite}
/* B Bulle */
.ex-veille .bu-pl{animation:ex-glance 5s ease-in-out infinite}
.ex-ecoute .bu-pp{transform:translate(0,-3px) scale(1.15)}
.ex-ecoute .bu-loop{animation:ex-wobble 1s ease-in-out infinite}
.ex-reflexion .bu-pl{animation:ex-orbit 1.6s linear infinite}
.bu-happy,.en-happy{opacity:0}
.ex-termine .bu-eyes,.ex-termine .en-eyes{opacity:0}
.ex-termine .bu-happy,.ex-termine .en-happy{opacity:1}
.ex-termine .bu-loop{animation:ex-hop 1.8s infinite}
.ex-souci .bu-pp{transform:translate(-3px,5px)}
.ex-souci .bu-pose{transform:rotate(-7deg) scale(.95)}
/* C Enveloppe */
.ex-veille .en-pl{animation:ex-glance 6s ease-in-out infinite}
.ex-ecoute .en-pose{transform:scale(1.04,1.08)}
.ex-ecoute .en-pp{transform:translate(2px,-3px)}
.ex-ecoute .en-loop{animation:ex-wobble 1s ease-in-out infinite}
.ex-reflexion .en-pp{transform:translate(-3px,-4px)}
.ex-reflexion .en-loop{animation:ex-sway 2.8s ease-in-out infinite}
.ex-termine .en-loop{animation:ex-hop 1.8s infinite}
.ex-souci .en-pose{transform:scale(1.06,.88)}
.ex-souci .en-pp{transform:translateY(4px)}
/* D Serrure */
.se-eyes{transform:scaleY(.7)}
.ex-veille .se-pl{animation:ex-peek 4.6s ease-in-out infinite}
.ex-ecoute .se-eyes{transform:scaleY(1.3)}
.ex-ecoute .se-loop{animation:ex-pulse 1.1s ease-in-out infinite}
.ex-reflexion .se-pp{transform:translateY(-1.6px)}
.ex-reflexion .se-loop{animation:ex-sway 2.8s ease-in-out infinite}
.ex-termine .se-eyes{transform:scaleY(.22)}
.ex-termine .se-loop{animation:ex-hop 1.8s infinite}
.ex-souci .se-pp{transform:translateY(1.6px)}
.ex-souci .se-pose{transform:scale(.92)}
/* E Terrier */
.ex .te-pose{transition:transform .8s cubic-bezier(.34,1.5,.64,1)}
.ex-veille .te-pose{transform:translateY(16px)}
.ex-veille .te-loop{animation:ex-bob 3.2s ease-in-out infinite}
.ex-ecoute .te-ep{transform:scale(1.3)}
.ex-ecoute .te-loop{animation:ex-wobble 1s ease-in-out infinite}
.ex-reflexion .te-pose{transform:translateY(27px)}
.ex-reflexion .te-ep{animation:ex-peek 3s ease-in-out infinite}
.ex-termine .te-loop{animation:te-pop 1.8s infinite}
.ex-souci .te-pose{transform:translateY(30px)}
.ex-souci .te-ep{transform:scaleY(.6)}
/* F Ligne */
.ex-veille .li-loop{animation:ex-breathe 4s ease-in-out infinite}
.ex-ecoute .li-eyes{transform:scaleY(1.45) translateY(-1px)}
.ex-ecoute .li-loop{animation:ex-wobble 1s ease-in-out infinite}
.ex-reflexion .li-line{stroke-dasharray:100;animation:li-trace 3.2s ease-in-out infinite}
.ex-termine .li-eyes{transform:scaleY(.4)}
.ex-termine .li-loop{animation:ex-hop 1.8s infinite}
.ex-souci .li-pose{transform:rotate(8deg)}
.ex-souci .li-eyes{transform:translateY(3px)}
/* G Yéti */
.ex-veille .ye-loop{animation:ex-breathe 3.6s ease-in-out infinite}
.ex-ecoute .ye-pose{transform:rotate(-6deg)}
.ex-ecoute .ye-eyes{transform:translate(-1px,-2px) scale(1.25)}
.ex-reflexion .ye-loop{animation:ex-waddle 1.2s ease-in-out infinite}
.ex-reflexion .ye-eyes{transform:translate(2px,-1px)}
.ex-termine .ye-loop{animation:ex-hop 1.6s infinite}
.ex-termine .ye-eyes{transform:scaleY(.35)}
.ex-souci .ye-pose{transform:scale(1.05,.9)}
.ex-souci .ye-eyes{transform:translateY(3px)}
/* H Sourire */
.so-teeth{opacity:0}
.ex-veille .so-loop{animation:ex-breathe 4s ease-in-out infinite}
.ex-ecoute .so-eyes{transform:scale(1.15)}
.ex-ecoute .so-m{animation:ex-talk .7s ease-in-out infinite}
.ex-reflexion .so-eyes{transform:translate(6px,-4px)}
.ex-reflexion .so-loop{animation:ex-sway-s 3s ease-in-out infinite}
.ex-termine .so-teeth{opacity:1}
.ex-termine .so-eyes{transform:scaleY(.35)}
.ex-termine .so-loop{animation:ex-hop 1.8s infinite}
.ex-souci .so-eyes{transform:translateY(3px) scale(.85)}
@media (prefers-reduced-motion:reduce){.ex *{animation:none!important}}

/* Variantes de logo B et C */
.lg *{transform-box:fill-box;transform-origin:50% 50%}
.lg .blk{animation:ex-blink 4.6s infinite}
.lg .lg-type{animation:lg-type 1.2s ease-in-out infinite}
.lg .lg-peek{animation:lg-peek 3.2s cubic-bezier(.34,1.4,.64,1) infinite}
.lg .lg-fly{animation:lg-fly 2.4s ease-in-out infinite}
@keyframes lg-type{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes lg-peek{0%,100%{transform:translateY(10px)}35%,70%{transform:translateY(0)}}
@keyframes lg-fly{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(3px,-4px) rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){.lg *{animation:none!important}}

/* Accent au choix de l'utilisateur (onboarding, Réglages). Myrtille par défaut. Tomate et Menthe décalées loin du rouge et du vert système */
.acc-myrtille{--accent:#5B5BF0;--accent-ink:#FFFFFF;--char-ink:#14143F;--accent-soft:#E6E6FD;--accent-deep:#3A3AC8;--comp-edge:#AEAEF8;--glow:rgba(91,91,240,0.26);--glow-strong:rgba(91,91,240,0.42)}
.t-dark.acc-myrtille,.t-dark .acc-myrtille,.acc-myrtille .t-dark{--accent-soft:#23234A;--accent-deep:#B9B9FF;--comp-edge:#3C3C8E;--glow:rgba(91,91,240,0.24);--glow-strong:rgba(91,91,240,0.38)}
.acc-abricot{--accent:#F6A877;--accent-ink:#3B1C0A;--char-ink:#3B1C0A;--accent-soft:#FCE6D6;--accent-deep:#9A4A1C;--comp-edge:#F2B48F;--glow:rgba(246,168,119,0.33);--glow-strong:rgba(246,168,119,0.52)}
.t-dark.acc-abricot,.t-dark .acc-abricot,.acc-abricot .t-dark{--accent-soft:#3A2A20;--accent-deep:#F5C2A0;--comp-edge:#7E5238;--glow:rgba(246,168,119,0.22);--glow-strong:rgba(246,168,119,0.36)}
.acc-tomate{--accent:#FF8A3D;--accent-ink:#2A0E04;--char-ink:#2A0E04;--accent-soft:#FFE4D4;--accent-deep:#B04A12;--comp-edge:#FFB98F;--glow:rgba(255,138,61,0.3);--glow-strong:rgba(255,138,61,0.46)}
.t-dark.acc-tomate,.t-dark .acc-tomate,.acc-tomate .t-dark{--accent-soft:#3D2416;--accent-deep:#FFB487;--comp-edge:#8A4A26;--glow:rgba(255,138,61,0.22);--glow-strong:rgba(255,138,61,0.36)}
.acc-menthe{--accent:#2BD9C0;--accent-ink:#06281F;--char-ink:#06281F;--accent-soft:#D6F7F2;--accent-deep:#0E7E70;--comp-edge:#8CE8DB;--glow:rgba(43,217,192,0.28);--glow-strong:rgba(43,217,192,0.44)}
.t-dark.acc-menthe,.t-dark .acc-menthe,.acc-menthe .t-dark{--accent-soft:#133A35;--accent-deep:#8FEDE0;--comp-edge:#1E6A60;--glow:rgba(43,217,192,0.2);--glow-strong:rgba(43,217,192,0.34)}
.acc-citron{--accent:#F7DD4A;--accent-ink:#2E2604;--char-ink:#2E2604;--accent-soft:#FBF3C8;--accent-deep:#7A6608;--comp-edge:#EDD978;--glow:rgba(247,221,74,0.35);--glow-strong:rgba(247,221,74,0.52)}
.t-dark.acc-citron,.t-dark .acc-citron,.acc-citron .t-dark{--accent-soft:#34301C;--accent-deep:#F2E38A;--comp-edge:#7A6A20;--glow:rgba(247,221,74,0.2);--glow-strong:rgba(247,221,74,0.34)}
.acc-bonbon{--accent:#FF9EC7;--accent-ink:#3A0A20;--char-ink:#3A0A20;--accent-soft:#FFE3EF;--accent-deep:#A8275E;--comp-edge:#FFC0DB;--glow:rgba(255,158,199,0.33);--glow-strong:rgba(255,158,199,0.5)}
.t-dark.acc-bonbon,.t-dark .acc-bonbon,.acc-bonbon .t-dark{--accent-soft:#3A2330;--accent-deep:#FFC3DD;--comp-edge:#7E3A58;--glow:rgba(255,158,199,0.22);--glow-strong:rgba(255,158,199,0.36)}
.acc-ciel{--accent:#7CC4FF;--accent-ink:#06263D;--char-ink:#06263D;--accent-soft:#E0F0FF;--accent-deep:#1F6AA8;--comp-edge:#B4DCFF;--glow:rgba(124,196,255,0.32);--glow-strong:rgba(124,196,255,0.48)}
.t-dark.acc-ciel,.t-dark .acc-ciel,.acc-ciel .t-dark{--accent-soft:#1C2C3D;--accent-deep:#B8E0FF;--comp-edge:#2E5A80;--glow:rgba(124,196,255,0.22);--glow-strong:rgba(124,196,255,0.36)}
.acc-lilas{--accent:#C9B2FF;--accent-ink:#23124A;--char-ink:#23124A;--accent-soft:#EFE8FF;--accent-deep:#5A3FA8;--comp-edge:#D9C9FF;--glow:rgba(201,178,255,0.34);--glow-strong:rgba(201,178,255,0.5)}
.t-dark.acc-lilas,.t-dark .acc-lilas,.acc-lilas .t-dark{--accent-soft:#2A2540;--accent-deep:#DCCDFF;--comp-edge:#5A4A90;--glow:rgba(201,178,255,0.24);--glow-strong:rgba(201,178,255,0.38)}

/* Onboarding */
.ob-top{position:absolute;top:50px;left:12px;right:16px;height:44px;display:flex;align-items:center;gap:12px;z-index:3}
.ob-prog{display:flex;gap:5px;flex:1;align-items:center}
.ob-sq{width:14px;height:14px;border-radius:4px;background:var(--s2);display:grid;place-items:center;flex:none}
.ob-sq.done{background:var(--accent)}
.ob-sq.done::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-ink)}
.ob-sq.cur{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.ob-step{font:600 13px var(--ff);color:var(--tx2);white-space:nowrap}
.ob-main{position:absolute;left:0;right:0;top:104px;bottom:112px;padding:6px 20px 0;display:flex;flex-direction:column;gap:16px;overflow:hidden;box-sizing:border-box}
.ob-h{font:900 30px/1.08 var(--ffr);letter-spacing:-.015em;margin:0;text-wrap:balance}
.ob-p{font-size:16px;line-height:1.45;color:var(--tx2);margin:0;text-wrap:pretty}
.ob-foot{position:absolute;left:16px;right:16px;bottom:30px;display:flex;flex-direction:column;gap:6px;z-index:3}
.btn.xl{height:54px;border-radius:27px;font-size:17px;width:100%}
.fld{display:flex;flex-direction:column;gap:6px}
.fld .in{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--s2);font:500 16px var(--ff);color:var(--tx);box-sizing:border-box}
.fld .in.mono{font:500 14px var(--ffm)}
.fld .hint{font-size:13px;line-height:1.35;color:var(--tx2)}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--s1);box-shadow:var(--card-sh);border:0;text-align:left;color:var(--tx);font-family:var(--ff);width:100%;box-sizing:border-box}
.opt.on{box-shadow:inset 0 0 0 2px var(--accent),var(--card-sh)}
.radio{flex:none;width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 2px var(--draft-edge)}
.opt.on .radio,.radio.on{box-shadow:inset 0 0 0 7px var(--accent)}
.chk{flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--draft-edge);display:grid;place-items:center;box-sizing:border-box}
.chk.on{background:var(--accent);box-shadow:none}
.chk.on::after{content:"";width:10px;height:5px;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:translateY(-2px) rotate(-45deg)}
.tgl{flex:none;width:51px;height:31px;border-radius:16px;background:var(--draft-edge);position:relative}
.tgl::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:14px;background:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.tgl.on{background:var(--accent)}
.tgl.on::after{left:22px}
.stt{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font:600 12px/1 var(--ff);white-space:nowrap}
.stt.ok{background:rgba(52,199,89,.14);color:#1E7A38}
.stt.ko{background:rgba(255,59,48,.12);color:#B8261C}
.t-dark .stt.ok{color:#6EDB8C}
.t-dark .stt.ko{color:#FF8A80}
.stt.wait{background:var(--s2);color:var(--tx2)}
.stt.rw{background:var(--accent-soft);color:var(--accent-deep)}
.log{background:var(--s2);border-radius:14px;padding:10px 12px;font:500 11.5px/1.6 var(--ffm);color:var(--tx2);white-space:pre-wrap;margin:0}
.grp{background:var(--s1);border-radius:18px;box-shadow:var(--card-sh);overflow:hidden;--hole:var(--s1)}
.grow{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border-top:.5px solid var(--sep);box-sizing:border-box}
.grow:first-child{border-top:0}
.grow .gx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grow .gx b{font:600 16px/1.25 var(--ff)}
.grow .gx span{font-size:13px;line-height:1.3;color:var(--tx2)}
.glyph{flex:none;width:34px;height:34px;border-radius:10px;background:var(--s2);display:grid;place-items:center;font:800 15px/1 var(--ffr);color:var(--tx)}
.stepper{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--s2);overflow:hidden}
.stepper span{min-width:34px;height:32px;display:grid;place-items:center;font:600 15px var(--ff);padding:0 6px}
.stepper span.v{min-width:56px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--sep)}

/* Fiche motion : démos en boucle */
.mo-dot{width:28px;height:28px;border-radius:14px;background:var(--accent)}
.mo-q{animation:mo-q 1.6s infinite}
.mo-s{animation:mo-s 1.6s infinite}
.mo-e{animation:mo-e 1.6s infinite}
@keyframes mo-q{0%,40%{transform:translateX(0);animation-timing-function:cubic-bezier(0,0,.2,1)}49.4%,90%{transform:translateX(150px);animation-timing-function:cubic-bezier(0,0,.2,1)}99.4%,100%{transform:translateX(0)}}
@keyframes mo-s{0%,40%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,1.15,.5,1)}55.6%,90%{transform:translateX(150px);animation-timing-function:cubic-bezier(.3,1.15,.5,1)}100%{transform:translateX(0)}}
@keyframes mo-e{0%,35%{transform:translateX(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}60%,85%{transform:translateX(150px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}100%{transform:translateX(0)}}
.mo-fly{animation:mo-fly 3s infinite}
@keyframes mo-fly{0%,25%{transform:translate(0,0) rotate(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.34,1.2,.64,1)}45%{transform:translate(150px,-110px) rotate(14deg) scale(.55);opacity:0}46%,70%{transform:translate(0,16px) scale(.96);opacity:0;animation-timing-function:ease-out}85%,100%{transform:translate(0,0) scale(1);opacity:1}}
.mo-swipe{animation:mo-swipe 3s infinite}
@keyframes mo-swipe{0%,15%{transform:translateX(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}42%,62%{transform:translateX(150px);animation-timing-function:cubic-bezier(.34,1.3,.64,1)}82%,100%{transform:translateX(0)}}
.mo-swlbl{animation:mo-swlbl 3s infinite}
@keyframes mo-swlbl{0%,28%{opacity:.25;transform:scale(.9)}34%,64%{opacity:1;transform:scale(1)}74%,100%{opacity:.25;transform:scale(.9)}}
.mo-undo{animation:mo-undo 10s linear infinite}
@keyframes mo-undo{0%{width:100%}100%{width:0%}}
.mo-glow{animation:mo-glow 1.1s ease-in-out infinite}
@keyframes mo-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.mo-acc{animation:mo-acc 8s ease-in-out infinite}
@keyframes mo-acc{0%,18%{background-color:#5B5BF0}25%,43%{background-color:#F6A877}50%,68%{background-color:#2BD9C0}75%,93%{background-color:#FF9EC7}100%{background-color:#5B5BF0}}
.mo-sheet{animation:mo-sheet 3.2s infinite}
@keyframes mo-sheet{0%,15%{transform:translateY(105%);animation-timing-function:cubic-bezier(.34,1.3,.64,1)}35%,75%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,1,1)}90%,100%{transform:translateY(105%)}}
@media (prefers-reduced-motion:reduce){.mo-q,.mo-s,.mo-e,.mo-fly,.mo-swipe,.mo-swlbl,.mo-glow,.mo-acc,.mo-sheet{animation:none!important}}

/* Landing page (page fluide) */
.lp{background:var(--bg);color:var(--tx);overflow-x:hidden}
.lp-wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.lp-sec{padding:96px 0}
.lp-eyebrow{font:700 13px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin:0}
.lp-h1{font:900 clamp(52px,8vw,108px)/.94 var(--ffr);letter-spacing:-.035em;margin:0;text-wrap:balance}
.lp-h2{font:900 clamp(34px,4.6vw,56px)/1.03 var(--ffr);letter-spacing:-.025em;margin:0;text-wrap:balance}
.lp-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--tx2);margin:0;max-width:640px;text-wrap:pretty}
.lp-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.lp-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.lp-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:56px;align-items:center}
.lp-nav{display:flex;align-items:center;gap:24px;padding:18px 0}
.lp-links{display:flex;gap:26px;margin-left:auto}
.lp-links a{color:inherit;text-decoration:none;font:600 15px var(--ff);opacity:.9}
.lp-links a:hover{opacity:1;text-decoration:underline}
.lp-hero{position:relative;overflow:hidden;background:var(--accent);color:var(--accent-ink)}
.lp-phone{position:relative;width:304px;height:658px;flex:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.25))}
.lp-phone>.phone{position:absolute;left:8px;top:8px;transform:scale(.76);transform-origin:0 0}
.lp-card{background:var(--s1);border-radius:28px;box-shadow:var(--card-sh);padding:24px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.lp-faq details{border-top:.5px solid var(--sep);padding:20px 0}
.lp-faq summary{font:800 20px/1.3 var(--ffr);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.lp-faq summary::after{content:"+";font-weight:400;color:var(--accent-deep)}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--tx2);max-width:760px}
@media (max-width:760px){.lp-links{display:none}.lp-sec{padding:64px 0}.lp-hide-s{display:none}}

/* Landing v2 : héros animé */
.hx{display:flex;flex-direction:column;align-items:center;gap:22px}
.hx-stage{position:relative;width:304px;height:658px}
.hx-stage>.lp-phone{position:absolute;inset:0;z-index:1}
.hx-scr{position:absolute;inset:0;opacity:0;transform:translateX(28px) scale(.98);transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.2,.64,1);background:var(--bg)}
.hx[data-step="0"] .hx-scr[data-s="0"],.hx[data-step="1"] .hx-scr[data-s="1"],.hx[data-step="2"] .hx-scr[data-s="2"]{opacity:1;transform:none}
.hx-char{position:absolute;left:-205px;bottom:170px;z-index:0;transform:rotate(-6deg)}
.hx-char2{left:auto;bottom:auto;right:-150px;top:150px;transform:rotate(8deg)}
.hx-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--s1);color:var(--tx);box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 40px rgba(0,0,0,.18);opacity:0;transform:translateY(12px) scale(.94);transition:opacity .4s ease,transform .55s cubic-bezier(.34,1.4,.64,1);pointer-events:none;white-space:nowrap}
.hx-chip>span:last-child{display:flex;flex-direction:column;gap:3px}
.hx-chip b{font:700 14px/1.2 var(--ff)}
.hx-chip small{font-size:12px;line-height:1.2;color:var(--tx2)}
.hx-l{left:-150px;top:-22px}
.hx-r{right:-140px;bottom:170px}
.hx[data-step="0"] [data-for="0"],.hx[data-step="1"] [data-for="1"],.hx[data-step="2"] [data-for="2"]{opacity:1;transform:none;transition-delay:.25s}
.hx[data-step="0"] .hx-r[data-for="0"],.hx[data-step="1"] .hx-r[data-for="1"],.hx[data-step="2"] .hx-r[data-for="2"]{transition-delay:.5s}
.hx-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hx-steps button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 6px;border:0;border-radius:20px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:inherit;font:700 14px/1 var(--ff);cursor:pointer}
.hx-steps button b{display:grid;place-items:center;width:28px;height:28px;border-radius:14px;background:rgba(255,255,255,.22);font-size:13px}
.hx-steps button[aria-selected="true"]{background:var(--accent-ink);color:var(--accent);box-shadow:none}
.hx-steps button[aria-selected="true"] b{background:var(--accent);color:var(--accent-ink)}
.hx-steps i{position:absolute;left:0;bottom:0;height:3px;width:0;background:currentColor;opacity:.5}
.hx.run .hx-steps button[aria-selected="true"] i{animation:hx-prog var(--hx-d,5s) linear forwards}
@keyframes hx-prog{to{width:100%}}
@media (max-width:1100px){.hx-l{left:-60px}.hx-r{right:-50px}.hx-char{left:-110px}.hx-char2{left:auto;right:-90px}}
@media (max-width:620px){.hx-chip,.hx-char{display:none}}
@media (prefers-reduced-motion:reduce){.hx-scr,.hx-chip{transition:none}}

/* Landing v2 : piliers en bento */
.pl-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pl-tile{grid-column:span 6;position:relative;overflow:hidden;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:22px;min-height:400px;box-sizing:border-box}
.pl-tile:nth-child(1),.pl-tile:nth-child(4){grid-column:span 7}
.pl-tile:nth-child(2),.pl-tile:nth-child(3){grid-column:span 5}
.pl-num{position:absolute;right:20px;top:4px;font:900 128px/1 var(--ffr);letter-spacing:-.05em;color:var(--i);opacity:.16;pointer-events:none}
.pl-viz{flex:1;display:grid;place-items:center;position:relative;z-index:1}
.pl-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;max-width:540px}
.pl-txt b{font:900 30px/1.05 var(--ffr);color:var(--i)}
.pl-txt p{margin:0;font-size:16px;line-height:1.5}
.pl-mem{position:relative;width:min(380px,100%);height:200px}
.pl-mem svg{position:absolute;inset:0;width:100%;height:100%}
.pl-mem .chip,.pl-core{position:absolute;transform:translate(-50%,-50%);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.pl-mem .chip{background:var(--s1);height:30px;font-size:13px}
.pl-core{left:50%;top:50%;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 10px;border-radius:22px;background:var(--i);color:var(--f);font:800 17px/1 var(--ffr)}
.pl-track{position:relative;height:10px;margin-top:10px;border-radius:5px;background:var(--s2)}
.pl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--i);animation:pl-fill 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes pl-fill{0%{width:0}55%,100%{width:100%}}
.pl-mark{position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:var(--tx)}
.pl-mark em{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font:600 11px/1 var(--ff);font-style:normal;color:var(--tx2);white-space:nowrap}
.pl-undo{height:4px;border-radius:2px;background:var(--s2);overflow:hidden}
.pl-undo span{display:block;height:100%;background:var(--accent)}
@media (max-width:900px){.pl-tile{grid-column:1/-1!important;min-height:0}}
@media (prefers-reduced-motion:reduce){.pl-fill{animation:none;width:100%}}

/* Landing v2 : journée en frise */
.dy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.dy::before{content:"";position:absolute;left:4%;right:4%;top:115px;height:8px;border-radius:4px;background:linear-gradient(90deg,#F3D27A,#8DB8F0 28%,#EE9A62 52%,#A9D9A8 74%,#2A2540)}
.dy-stop{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.dy-char{height:72px;display:grid;place-items:end center}
.dy-stop time{font:900 20px/22px var(--ffr);color:var(--i);font-variant-numeric:tabular-nums}
.dy-node{width:14px;height:14px;border-radius:7px;background:var(--s1);box-shadow:0 0 0 3px var(--i);margin:2px 0 4px;position:relative;z-index:1}
.dy-stop .lbl{font-size:11px}
.dy-bub{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:14px 12px;border-radius:20px;background:var(--s1);box-shadow:var(--card-sh);box-sizing:border-box}
.dy-bub b{font:800 16px/1.2 var(--ffr)}
.dy-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dy-night .dy-bub{background:#1E1E21;color:#F2F0EC}
.dy-night .dy-bub .meta{color:#A3A09A}
.dy-night .dy-bub .stt.wait{background:#2A2A2E;color:#A3A09A}
@media (max-width:900px){
  .dy{grid-template-columns:1fr;gap:18px;padding-left:44px}
  .dy::before{left:16px;right:auto;top:8px;bottom:8px;width:8px;height:auto;background:linear-gradient(180deg,#F3D27A,#8DB8F0 28%,#EE9A62 52%,#A9D9A8 74%,#2A2540)}
  .dy-stop{display:grid;grid-template-columns:64px 1fr;grid-template-areas:"c t" "c l" "b b";align-items:center;text-align:left;column-gap:12px;row-gap:4px;position:relative}
  .dy-char{grid-area:c;height:64px}.dy-stop time{grid-area:t}.dy-stop .lbl{grid-area:l}.dy-bub{grid-area:b;align-items:flex-start}
  .dy-node{position:absolute;left:-35px;top:25px;margin:0}
  .dy-row{justify-content:flex-start}
}

/* Landing v2 : fiche de la base de connaissance */
.kb{gap:16px}
.kb-ids{display:flex;gap:6px;flex-wrap:wrap}
.kb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kb-stats div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:var(--f)}
.kb-stats b{font:900 20px/1 var(--ffr);color:var(--i)}
.kb-stats span{font-size:12px;line-height:1.2;color:var(--i);opacity:.8}
.kb-blk{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:.5px solid var(--sep)}
.kb-f{font-size:15px;line-height:1.45}
.kb-f b{font-weight:600}
.kb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:.5px solid var(--sep)}

/* Landing v2 : choix du visage, séparation */
.lg-pick{display:flex;gap:12px}
.lg-pick button{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;padding:12px 0 10px;border:0;border-radius:22px;background:var(--s1);box-shadow:var(--card-sh);font:600 14px/1 var(--ff);color:var(--tx);cursor:pointer}
.lg-pick button[aria-checked="true"]{box-shadow:inset 0 0 0 2.5px var(--accent),var(--card-sh)}
.lp-sep{display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto}
.lp-sep .node{background:var(--accent)}

/* Landing v2 : graphe d'architecture */
.ag{position:relative;display:grid;grid-template-columns:1fr .95fr 2.05fr .95fr;grid-template-areas:"src mid core app" "src mid bot app";column-gap:48px;row-gap:40px;align-items:center}
.ag-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ag-src,.ag-mid,.ag-app,.ag-bot,.ag-core{position:relative;z-index:1}
.ag-src{grid-area:src;display:flex;flex-direction:column;gap:10px}
.ag-mid{grid-area:mid;display:flex;flex-direction:column;gap:40px}
.ag-app{grid-area:app}
.ag-bot{grid-area:bot;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ag-h{font:700 12px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.ag-n{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:16px;background:var(--s1);box-shadow:var(--card-sh);box-sizing:border-box}
.ag-n b{font:800 16px/1.2 var(--ffr)}
.ag-std{background:var(--f);color:var(--i);box-shadow:none}
.ag-std .tok{color:var(--i);opacity:.8}
.ag-d{font-size:13px;line-height:1.4}
.ag-d code{font:600 12px var(--ffm)}
.ag-badge{align-self:flex-start;font:900 22px/1 var(--ffr);letter-spacing:-.01em}
.ag-core{grid-area:core;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"h h h" "in tri cel" ". mem ." "send send send";column-gap:22px;row-gap:22px;padding:18px;border-radius:26px;background:#141416;color:#F2F0EC;--s1:#1E1E21;--tx2:#A3A09A;--card-sh:none}
.ag-core .ag-h{grid-area:h}
.ag-core .ag-n{background:#1E1E21}
.ag-core .ag-std{background:var(--f)}
.ag-send{background:transparent!important;outline:1.5px dashed var(--accent);outline-offset:-1.5px;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.ag-e{fill:none;stroke:var(--tx2);stroke-width:1.6;stroke-dasharray:5 5;opacity:.75}
.ag-e.hot{stroke:var(--accent);stroke-width:2;opacity:1}
.ag-flow .ag-e{animation:ag-flow 1.2s linear infinite}
@keyframes ag-flow{to{stroke-dashoffset:-20}}
.ag-lbl{position:absolute;z-index:3;transform:translate(-50%,-50%);padding:3px 8px;border-radius:10px;background:var(--bg);font:600 11px/1.2 var(--ff);color:var(--tx2);white-space:nowrap}
.ag-lbl.hot{color:var(--accent-deep)}
.ag-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;font-size:15px;color:var(--tx2)}
@media (max-width:980px){
  .ag{grid-template-columns:1fr;grid-template-areas:"src" "mid" "core" "bot" "app";row-gap:44px}
  .ag-src{display:grid;grid-template-columns:1fr 1fr}.ag-src .ag-h{grid-column:1/-1}
  .ag-mid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .ag-core{column-gap:12px;padding:14px}
  .ag-core .ag-n{padding:10px}
  .ag-bot{gap:96px}
  .ag-badge{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.ag-flow .ag-e{animation:none}}
@media (max-width:620px){.pl-mem .chip{font-size:12px;padding:0 9px}}
@media (max-width:760px){.lp-wrap.lp-sec{padding:64px 24px}#prive .sec+div{flex-direction:column;align-items:stretch}#prive .sec+div>div{width:auto!important}}
/* Teinte qui suit l'accent choisi */
.tp-acc{--f:var(--accent-soft);--i:var(--accent-deep);--g1:var(--comp-edge);--g2:color-mix(in srgb,var(--accent) 45%,#FFFFFF);--g3:var(--accent-soft)}
.t-dark .tp-acc,.t-dark.tp-acc{--g2:color-mix(in srgb,var(--accent) 35%,#000000)}
/* Gris neutre à peine teinté par l'accent (bento des piliers) */
.tp-neu{--f:color-mix(in srgb,var(--accent) 7%,#ECEBE8);--i:color-mix(in srgb,var(--accent-deep) 50%,#1C1C1E);--g1:color-mix(in srgb,var(--accent) 16%,#E2E1DE);--g2:color-mix(in srgb,var(--accent) 5%,#FAFAF9);--g3:color-mix(in srgb,var(--accent) 4%,#F1F0EE)}
.pl-tile.tp-neu:nth-child(2),.pl-tile.tp-neu:nth-child(3){--g3:color-mix(in srgb,var(--accent) 6%,#E7E6E3);--g2:color-mix(in srgb,var(--accent) 4%,#F3F2F0)}
/* Fondu entre deux accents pendant la démo de personnalisation */
@property --accent{syntax:'<color>';inherits:true;initial-value:#2BD9C0}
@property --accent-ink{syntax:'<color>';inherits:true;initial-value:#06281F}
@property --accent-soft{syntax:'<color>';inherits:true;initial-value:#D6F7F2}
@property --accent-deep{syntax:'<color>';inherits:true;initial-value:#0E7E70}
@property --char-ink{syntax:'<color>';inherits:true;initial-value:#06281F}
@property --comp-edge{syntax:'<color>';inherits:true;initial-value:#8CE8DB}
.lp-fade[class*="acc-"],.lp-fade [class*="acc-"]{transition:--accent .9s ease,--accent-ink .9s ease,--accent-soft .9s ease,--accent-deep .9s ease,--char-ink .9s ease,--comp-edge .9s ease}
@media (prefers-reduced-motion:reduce){.lp-fade[class*="acc-"],.lp-fade [class*="acc-"]{transition:none}}